Bagaimana untuk melaksanakan editor kolaboratif dalam talian menggunakan WebSocket dan JavaScript-tutorial js-php.cn

Bagaimana untuk melaksanakan editor kolaboratif dalam talian menggunakan WebSocket dan JavaScript

Editor kolaboratif masa nyata telah menjadi ciri standard pembangunan web moden Terutamanya dalam pelbagai kerjasama pasukan, penyuntingan dokumen dalam talian dan senario pengurusan tugas, teknologi komunikasi masa nyata berdasarkan WebSocket boleh meningkatkan kecekapan komunikasi antara ahli pasukan. dan kesan kolaboratif. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk membina editor kolaboratif dalam talian yang mudah untuk membantu pembaca memahami dengan lebih baik prinsip dan penggunaan WebSocket.

Fahami prinsip asas WebSocket

WebSocket ialah teknologi komunikasi dua hala berdasarkan protokol TCP, yang boleh mencipta sambungan berterusan antara penyemak imbas web dan pelayan dan mencapai tolakan mesej dan penghantaran data masa nyata. Berbanding dengan mod respons permintaan tanpa kewarganegaraan protokol HTTP tradisional, WebSocket mempunyai kelebihan berikut:

Komunikasi dua hala masa nyata antara pelayan dan pelanggan, tidak perlu meninjau atau memuat semula halaman
Menyokong mesej pada satu TCP sambungan Pertukaran untuk mengurangkan overhed rangkaian
Meningkatkan daya pemprosesan rangkaian dan mengurangkan kependaman, dan boleh menghantar data dengan cekap antara pelanggan

Protokol WebSocket adalah serupa dengan protokol HTTP, tetapi proses jabat tangan protokol WebSocket adalah sedikit berbeza. Jabat tangan WebSocket memerlukan penghantaran maklumat pengepala khas melalui permintaan HTTP untuk menunjukkan permintaan sambungan Jika pelayan bersedia menerima sambungan, kod status 101 dikembalikan, menunjukkan bahawa sambungan telah diwujudkan. Selepas klien dan pelayan berjaya disambungkan, sambungan WebSocket akan kekal terbuka sehingga klien atau pelayan menamatkan sambungan.

WebSocket API menyediakan objek WebSocket, yang boleh digunakan dalam kod JavaScript untuk mencipta dan mengurus sambungan WebSocket. Berikut ialah penggunaan asas 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!');

Salin selepas log masuk

Melaksanakan fungsi asas editor kolaboratif dalam talian

Untuk melaksanakan editor kolaboratif dalam talian, kami perlu melaksanakan program sebelah pelayan yang mudah berdasarkan WebSocket untuk menerima dan memproses data yang dihantar oleh pelanggan Mesej teks, hasil pemprosesan dihantar semula kepada semua pelanggan pada masa yang sama. Di sini, kami menggunakan perpustakaan Node.js dan WebSocket untuk melaksanakan program sebelah pelayan. Mula-mula, cipta projek Node.js baharu dengan melaksanakan arahan berikut dalam tetingkap terminal:

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

Salin selepas log masuk

Kemudian, pasang perpustakaan WebSocket menggunakan arahan npm:

npm install ws

Salin selepas log masuk

Seterusnya, buat projek baharu yang dipanggil server.js< /code > file, tulis kod berikut: <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);
      }
    });
  });
});

Salin selepas log masuk

以上代码使用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>

Salin selepas log masuk

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

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

node server.js

Salin selepas log masuk

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

Kod di atas menggunakan perpustakaan WebSocket untuk mencipta pelayan WebSocket yang akan mendengar pada port 8080. Apabila klien menyambung ke pelayan, pelayan menghantar kandungan teks semasa kepada klien. Pada masa yang sama, pelayan juga akan mendengar mesej teks yang dihantar oleh pelanggan, mengemas kini teks yang dikongsi dan menghantar hasil pemprosesan kepada semua pelanggan.

Berikut ialah kod HTML dan JavaScript halaman klien:

Kod di atas mencipta kotak teks dan objek WebSocket Apabila pengguna memasukkan teks dalam kotak teks, pelanggan akan menghantar mesej teks ke pelayan dan dengar Apabila mesej teks baharu diterima, kandungan kotak teks dikemas kini. Pada masa yang sama, pelanggan juga akan menerima kandungan teks permulaan yang dihantar oleh pelayan selepas sambungan WebSocket berjaya.

Anda kini boleh memulakan program pelayan dan membuka halaman klien dalam penyemak imbas. 🎜rrreee🎜Buka penyemak imbas dan lawati http://localhost:8080/ untuk melihat editor kolaboratif dalam talian yang ringkas. Apabila dua atau lebih pengguna melawat halaman web pada masa yang sama, kerana mana-mana pengguna menaip teks dalam editor, pengguna lain boleh melihat teks mengemas kini dalam masa nyata. Ini melaksanakan editor kolaboratif dalam talian yang mudah. 🎜🎜🎜Ringkasan🎜🎜🎜Melalui pengenalan artikel ini, pembaca boleh mempelajari cara menggunakan WebSocket dan JavaScript untuk membina editor kolaboratif dalam talian yang ringkas. WebSocket menyediakan mekanisme komunikasi dua hala masa nyata yang boleh meningkatkan kesan interaksi dan kecekapan kerjasama aplikasi Web dengan sangat baik. Dalam pembangunan sebenar, WebSocket telah digunakan secara meluas dalam bidang seperti kerjasama dalam talian, push mesej masa nyata, pembangunan permainan dan Internet of Things. Saya harap artikel ini dapat membantu pembaca menggunakan teknologi WebSocket dan JavaScript dengan lebih baik untuk mencapai komunikasi masa nyata. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan editor kolaboratif dalam talian menggunakan WebSocket dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!