So implementieren Sie einen kollaborativen Online-Editor mit WebSocket und JavaScript

Der kollaborative Editor in Echtzeit ist zu einem Standardmerkmal der modernen Webentwicklung geworden. Insbesondere in verschiedenen Szenarios für Teamzusammenarbeit, Online-Dokumentbearbeitung und Aufgabenverwaltung kann die auf WebSocket basierende Echtzeit-Kommunikationstechnologie die Kommunikationseffizienz zwischen Teammitgliedern verbessern. und kollaborative Effekte. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript einen einfachen kollaborativen Online-Editor erstellen, um den Lesern ein besseres Verständnis der Prinzipien und der Verwendung von WebSocket zu ermöglichen.

1. Verstehen Sie die Grundprinzipien von WebSocket

WebSocket ist eine bidirektionale Kommunikationstechnologie basierend auf dem TCP-Protokoll, die eine dauerhafte Verbindung zwischen einem Webbrowser und einem Server herstellen und Nachrichten-Push und Datenübertragung in Echtzeit ermöglichen kann. Im Vergleich zum herkömmlichen zustandslosen Anfrage-Antwort-Modus des HTTP-Protokolls bietet WebSocket die folgenden Vorteile:

• Zwei-Wege-Kommunikation in Echtzeit zwischen dem Server und dem Client, keine Abfrage oder Aktualisierung der Seite erforderlich
• Unterstützt Nachrichten auf einem einzigen TCP Verbindungsaustausch zur Reduzierung des Netzwerk-Overheads
• Verbessern Sie den Netzwerkdurchsatz, reduzieren Sie die Latenz und können Sie Daten effizient zwischen Clients übertragen

Das WebSocket-Protokoll ähnelt dem HTTP-Protokoll, der Handshake-Prozess des WebSocket-Protokolls ist jedoch etwas anders. Der WebSocket-Handshake erfordert das Senden spezieller Header-Informationen über die HTTP-Anfrage, um die Verbindungsanforderung anzuzeigen. Wenn der Server bereit ist, die Verbindung anzunehmen, wird der Statuscode 101 zurückgegeben, der angibt, dass die Verbindung hergestellt wurde. Nachdem Client und Server erfolgreich verbunden wurden, bleibt die WebSocket-Verbindung geöffnet, bis der Client oder Server die Verbindung beendet.

WebSocket API stellt WebSocket-Objekte bereit, die in JavaScript-Code zum Erstellen und Verwalten von WebSocket-Verbindungen verwendet werden können. Das Folgende ist die grundlegende Verwendung von WebSocket:

// 创建WebSocket对象
let socket = new WebSocket('ws://localhost:8080');

// WebSocket事件处理函数
socket.onopen = function() {
  console.log('WebSocket连接已打开');
};
socket.onmessage = function(event) {
  console.log('WebSocket收到消息:', event.data);
};
socket.onclose = function() {
  console.log('WebSocket连接已关闭');
};

// 发送消息到服务器
socket.send('Hello, WebSocket!');

2. Implementieren Sie die Grundfunktionen des Online-Kollaborationseditors.

Um den Online-Kollaborationseditor zu implementieren, müssen wir ein einfaches serverseitiges Programm basierend auf WebSocket implementieren, um und zu akzeptieren Verarbeiten Sie die vom Client gesendeten Daten. Die Verarbeitungsergebnisse werden gleichzeitig an alle Clients zurückgesendet. Hier verwenden wir Node.js und die WebSocket-Bibliothek, um das serverseitige Programm zu implementieren. Erstellen Sie zunächst ein neues Node.js-Projekt, indem Sie den folgenden Befehl in einem Terminalfenster ausführen:

mkdir websocket-editor
cd websocket-editor
npm init -y

Anschließend installieren Sie die WebSocket-Bibliothek mit dem npm-Befehl:

npm install ws

Als nächstes erstellen Sie ein neues Projekt mit dem Namen server.js< /code > Datei, schreiben Sie den folgenden Code: <code>server.js的文件，写入以下代码：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

let sharedText = '';

wss.on('connection', (ws) => {
  console.log('Client connected');

  // 发送当前文本到客户端
  ws.send(sharedText);

  // 接收客户端的文本消息
  ws.on('message', (message) => {
    console.log('Received message:', message);
    sharedText = message;

    // 发送文本消息给所有客户端
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(sharedText);
      }
    });
  });
});

以上代码使用WebSocket库创建一个WebSocket服务器端，将监听在8080端口。当客户端连接到服务器时，服务器会发送当前的文本内容到客户端。同时，服务器也会监听客户端发送的文本消息，更新共享文本并将处理结果发送给所有客户端。

下面是客户端页面的HTML和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>WebSocket Editor</title>
  <style>
  textarea {
    width: 100%;
    height: 300px;
    font-size: 16px;
    line-height: 1.4;
  }
  </style>
</head>
<body>
  <h1>WebSocket Editor</h1>
  <textarea id="editor"></textarea>
  <script>
    const socket = new WebSocket('ws://localhost:8080');
    const editor = document.getElementById('editor');

    socket.addEventListener('open', (event) => {
      console.log('WebSocket连接已打开');
    });

    socket.addEventListener('message', (event) => {
      console.log('WebSocket收到消息:', event.data);
      editor.value = event.data;
    });

    editor.addEventListener('input', (event) => {
      const text = event.target.value;
      socket.send(text);
    });
  </script>
</body>
</html>

以上代码创建了一个文本框和一个WebSocket对象，当用户在文本框中输入文本时，客户端会将文本消息发送到服务器，并监听收到的新文本消息，更新文本框的内容。同时客户端也会在WebSocket连接成功后，接收服务器发来的初始化文本内容。

现在可以启动服务器程序，并在浏览器中打开客户端页面。

node server.js

打开浏览器，并访问http://localhost:8080/rrreee

3. Das Folgende ist der HTML- und JavaScript-Code der Clientseite:
rrreee

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen kollaborativen Online-Editor mit WebSocket und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!