So implementieren Sie eine einfache Chat-Anwendung mit JavaScript-Front-End-Fragen und Antworten-php.cn

So implementieren Sie eine einfache Chat-Anwendung mit JavaScript

PHPz

Freigeben： 2023-04-18 18:27:47

Original

1471 Leute haben es durchsucht

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie ist Instant Messaging in den letzten Jahren zu einem unverzichtbaren Bestandteil des täglichen Lebens der Menschen geworden. Heutzutage sind Chat-Tools zu einer der wichtigsten Kommunikationsmöglichkeiten für Menschen geworden. In diesem Artikel wird erläutert, wie Sie eine einfache Chat-Anwendung mithilfe von JavaScript implementieren.

1. Grundkenntnisse

Bevor Sie mit der Implementierung einer Chat-Anwendung beginnen, müssen Sie einige grundlegende Frontend-Entwicklungskenntnisse wie HTML, CSS und JavaScript beherrschen. Wenn Sie diese Techniken noch nicht beherrschen, lernen Sie zunächst ihre Grundlagen.

2. Schnittstellendesign der Chat-Anwendung

Bevor Sie eine Chat-Anwendung implementieren, müssen Sie zunächst eine einfache Schnittstelle entwerfen. In dieser Anwendung verwenden wir HTML und CSS zum Erstellen von Webseitenlayouts und JavaScript zur Interaktion mit dem Benutzer.

Zuerst müssen wir eine HTML-Datei erstellen und dann der Seite ein Textfeld und eine Schaltfläche zum Senden hinzufügen:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>简易聊天应用</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="chat-log"></div>
  <input id="chat-input" type="text" placeholder="请输入一些文字...">
  <button id="send-button">发送</button>
  
  <script src="app.js"></script>
</body>
</html>

Nach dem Login kopieren

Als nächstes legen Sie den Stil der Seite fest die CSS-Datei:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

#chat-log {
  background-color: #ffffff;
  height: 400px;
  max-width: 600px;
  margin: 20px auto;
  overflow: scroll;
  padding: 10px;
}

#chat-input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
  border: 2px solid #cccccc;
}

#send-button {
  display: block;
  margin: 20px auto;
  border: none;
  background-color: #4285f4;
  color: #ffffff;
  font-size: 16px;
  padding: 10px 20px;
  cursor: pointer;
}

Nach dem Login kopieren

Damit die Chat-Anwendung interaktive Funktionen erreichen kann, müssen wir schließlich JavaScript-Code schreiben. In den folgenden Abschnitten erfahren Sie, wie Sie eine einfache Chat-Anwendung mit JavaScript erstellen.

3. Verwenden Sie JavaScript, um Chat-Anwendungen zu implementieren

1. Erstellen Sie WebSockets

WebSockets ist eine neue Art der bidirektionalen Kommunikation zwischen dem Client und der Servertechnologie. Damit können wir eine Echtzeit-Chat-Anwendung erstellen.

In unserer Anwendung müssen wir einen WebSocket erstellen, damit der Client mit dem Server kommunizieren kann. Wenn Sie WebSocket noch nicht kennen, lernen Sie zunächst die Grundlagen kennen.

Hier ist der JavaScript-Code zum Erstellen eines WebSocket:

const socket = new WebSocket('ws://localhost:3000');

socket.addEventListener('open', function (event) {
  console.log('服务器已连接');
});

socket.addEventListener('message', function (event) {
  console.log('服务器发送了一条消息: ', event.data);
});

socket.addEventListener('close', function (event) {
  console.log('服务器已关闭');
});

socket.addEventListener('error', function (event) {
  console.log('服务器发生了错误');
});

Nach dem Login kopieren

Im obigen Code verwenden wir die WebSocket-API, um eine WebSocket-Instanz zu erstellen. Der von uns übergebene Parameter ist die Adresse des Servers. Bitte ändern Sie die Parameter hier entsprechend Ihrer tatsächlichen Serveradresse.

Nachdem wir den WebSocket erstellt haben, müssen wir die Ereignisse „Öffnen“, „Nachricht“, „Schließen“ und „Fehler“ daran binden. Diese Ereignisse stellen eine erfolgreiche Verbindung zum Server, eine empfangene Nachricht, eine geschlossene Verbindung und einen Fehler dar.

2. Senden und Empfangen von Nachrichten

Bei der Implementierung einer Chat-Anwendung müssen wir Code schreiben, um von Benutzern eingegebene Nachrichten an den Server zu senden und von anderen Benutzern gesendete Nachrichten zu empfangen.

Der Vorgang zum Senden einer Nachricht ist sehr einfach. Sie müssen nur den Wert im Textfeld auf der Seite abrufen, wenn der Benutzer auf die Schaltfläche „Senden“ klickt, und ihn über WebSocket an den Server senden .

const inputElement = document.querySelector('#chat-input');
const sendButtonElement = document.querySelector('#send-button');

sendButtonElement.addEventListener('click', function(event) {
  event.preventDefault();

  const message = inputElement.value;
  inputElement.value = '';

  socket.send(message);
});

Nach dem Login kopieren

Der obige Code erstellt einen Ereignis-Listener. Wenn der Benutzer auf die Schaltfläche „Senden“ klickt, erhält er den Wert im Textfeld und sendet ihn über WebSocket an den Server. Um den Code robuster zu machen, fügen wir dem „sendButtonElement“-Element außerdem ein Click-Ereignis hinzu.

Als nächstes müssen wir Code schreiben, um von anderen Benutzern gesendete Nachrichten zu empfangen. Durch die Implementierung dieser Funktion kann Ihre Chat-Anwendung nützlicher werden. Wenn eine Nachricht eingeht, müssen wir den Chatverlauf auf der Seite aktualisieren, damit der Benutzer die Nachricht sehen kann.

const chatLogElement = document.querySelector('#chat-log');

socket.addEventListener('message', function(event) {
  const message = event.data;

  const chatMessageElement = document.createElement('div');
  chatMessageElement.innerText = message;

  chatLogElement.appendChild(chatMessageElement);
});

Nach dem Login kopieren

Im obigen Code verwenden wir die Methode addEventListener, um das Nachrichtenereignis für WebSocket zu binden. Wenn der Server eine Nachricht sendet, fügen wir die Daten zunächst zu einer Textnachricht zusammen, erstellen dann ein div-Element und fügen die Nachricht hinzu.

3. Chat-Anwendung testen

Jetzt ist unsere Chat-Anwendung im Grunde fertig. Zum Testen können Sie einen Node.js-Server auf Ihrem lokalen Computer starten und Ihre Chat-App-Seite in einem Browser öffnen.

Geben Sie den folgenden Befehl in das Terminal ein, um den Node.js-Server zu starten:

node app.js

Nach dem Login kopieren

Dabei ist app.js der Dateiname des Servercodes, den wir geschrieben haben. Wenn Sie diesen Code noch nicht geschrieben haben, lesen Sie bitte zunächst das Tutorial zur Implementierung von WebSockets mit Node.js.

Jetzt können Sie die Chat-Seite in Ihrem Browser öffnen und eine Nachricht in das Textfeld eingeben. Klicken Sie dann auf die Schaltfläche „Senden“. An dieser Stelle sollte die von Ihnen eingegebene Nachricht in Ihrem Chatverlauf angezeigt werden.

#### 4. Zusammenfassung

JavaScript ist eine leistungsstarke Programmiersprache, mit der sich sehr praktische Chat-Anwendungen schreiben lassen. In diesem Artikel haben wir vorgestellt, wie man eine einfache Chat-Anwendung mit WebSocket implementiert. Wir haben eine Seite mit HTML, CSS und JavaScript erstellt und die Echtzeitkommunikation mithilfe von WebSocket implementiert. Wenn Sie diese Fähigkeiten noch nicht beherrschen, empfehle ich Ihnen, sich diese Grundlagen anzueignen, bevor Sie mit diesem kleinen Projekt beginnen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine einfache Chat-Anwendung mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!