Swift

Aufbau der Chat-Schnittstelle

Um chatten zu können, müssen Sie einen neuen View Controller für die Chat-Schnittstelle erstellen. Wählen Sie aus dem Xcode-Menü File > New > File.... Wählen Sie eine Kakao-Touch-Klasse, nennen Sie es ChatViewController mit einer Unterklasse von UIViewController und Sprache der Swift.

Dadurch wird eine neue Datei mit dem Namen ChatViewControlleran der Spitze der Einfuhr NexmoClient:

import UIKit
import NexmoClient

Die Chat-Schnittstelle wird benötigt:

A UITextView um die Chat-Nachrichten anzuzeigen
A UITextField um Nachrichten einzugeben

Öffnen Sie ChatViewController.swift und fügen Sie es programmatisch hinzu:

class ChatViewController: UIViewController {
    let inputField = UITextField()
    let conversationTextView = UITextView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemBackground
        
        conversationTextView.text = ""
        conversationTextView.backgroundColor = .lightGray
        conversationTextView.isUserInteractionEnabled = false
        conversationTextView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(conversationTextView)
        
        inputField.delegate = self
        inputField.returnKeyType = .send
        inputField.layer.borderWidth = 1
        inputField.layer.borderColor = UIColor.lightGray.cgColor
        inputField.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(inputField)
        
        NSLayoutConstraint.activate([
            conversationTextView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            conversationTextView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            conversationTextView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            conversationTextView.bottomAnchor.constraint(equalTo: inputField.topAnchor, constant: -20),
            
            inputField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            inputField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            inputField.heightAnchor.constraint(equalToConstant: 40),
            inputField.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor, constant: -20)
        ])   
    }

    override func viewWillAppear(_ animated: Bool) {
        NotificationCenter.default.addObserver(self, selector: #selector(self.keyboardWasShown),
         name: UIResponder.keyboardDidShowNotification, object: nil)
    }

    @objc func keyboardWasShown(notification: NSNotification) {
        if let kbSize = (notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect)?.size {
            view.layoutMargins = UIEdgeInsets(top: 0, left: 0, bottom: kbSize.height - 20, right: 0)
        }
    }

In der viewWillAppear Funktion wird ein Beobachter zu der keyboardDidShowNotification die die keyboardWasShown. Die keyboardWasShown Funktion passt die Layout-Ränder der Ansicht an, die das Eingabefeld verschiebt. Dies stoppt die inputField beim Tippen von der Tastatur blockiert werden.

Die `UITextField` Delegierte

Sie müssen die folgenden Bedingungen erfüllen UITextFieldDelegate um zu wissen, wann der Benutzer mit dem Tippen fertig ist, um das Eingabefeld an seine ursprüngliche Position zu verschieben. Fügen Sie am Ende der Datei hinzu:

extension ChatViewController: UITextFieldDelegate {
    func textFieldDidEndEditing(_ textField: UITextField) {
        view.layoutMargins = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}

Die Präsentation der `ChatViewController`

Nun, da die Chat-Schnittstelle erstellt ist, müssen Sie den View-Controller aus dem Anmeldebildschirm, den Sie zuvor erstellt haben, präsentieren. Sie benötigen Informationen über den eingeloggten Benutzer, die zwischen den beiden View Controllern weitergegeben werden müssen, innerhalb ChatViewController.swift hinzufügen:

class ChatViewController: UIViewController {
    ...
    let client = NXMClient.shared
    let user: User

    init(user: User) {
        self.user = user
        super.init(nibName: nil, bundle: nil)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

Dies definiert einen benutzerdefinierten Initialisierer für die Klasse, der eine User.type als seinen Parameter, der dann in der lokalen user Eigenschaft. Da wir nun die Benutzerinformationen haben, können Sie die Navigationsleiste verwenden, um anzuzeigen, mit wem der Benutzer chatten wird, in viewDidLoad hinzufügen:

navigationItem.leftBarButtonItem = 
UIBarButtonItem(title: "Logout", style: .done, target: self, action: #selector(self.logout))
title = "Conversation with \(user.chatPartnerName)"

Dadurch wird auch eine Abmeldeschaltfläche in der Navigationsleiste erstellt, die die logout Funktion an das Ende von ChatViewController.swift:

class ChatViewController: UIViewController {
    ...

     @objc func logout() {
        client.logout()
        dismiss(animated: true, completion: nil)
    }

Jetzt können Sie die Chat-Schnittstelle zusammen mit den Benutzerinformationen präsentieren. Zu diesem Zweck müssen Sie die NXMClientDelegate Erweiterung im ViewController.swift Datei:

extension ViewController: NXMClientDelegate {
    func client(_ client: NXMClient, didChange status: NXMConnectionStatus, reason: NXMConnectionStatusReason) {
        guard let user = self.user else { return }

        switch status {
        case .connected:
            setStatusLabel("Connected")
            let navigationController = UINavigationController(rootViewController: ChatViewController(user: user))
            navigationController.modalPresentationStyle = .overFullScreen
            present(navigationController, animated: true, completion: nil)
        ...
        }
    }
    ...
}

Wenn der Benutzer erfolgreich eine Verbindung herstellt, wird ein ChatViewController werden die benötigten Benutzerdaten angezeigt.

Bauen und Ausführen

Führen Sie das Projekt erneut aus (Cmd + R), um ihn im Simulator zu starten. Wenn Sie sich mit einem der Benutzer anmelden, sehen Sie die Chat-Schnittstelle