Rumah >hujung hadapan web >tutorial js >Cara membuat ruang sembang masa nyata menggunakan JavaScript dan WebSocket

Cara membuat ruang sembang masa nyata menggunakan JavaScript dan WebSocket

WBOYasal: 2023-12-17 15:06:391229semak imbas

Cara mencipta ruang sembang masa nyata menggunakan JavaScript dan WebSocket

Pengenalan: Dengan perkembangan berterusan Internet, komunikasi masa nyata menjadi semakin penting. Apl sembang langsung telah menjadi ciri standard pada banyak tapak web dan apl. Artikel ini akan memperkenalkan cara membina ruang sembang masa nyata yang ringkas menggunakan teknologi JavaScript dan WebSocket.

1. Apakah itu WebSocket
WebSocket ialah protokol yang menyediakan komunikasi masa nyata dua hala antara pelanggan dan pelayan. Berbanding dengan protokol HTTP tradisional, WebSocket mempunyai kependaman yang lebih rendah dan prestasi masa nyata yang lebih tinggi, dan boleh mewujudkan sambungan berterusan antara pelanggan dan pelayan. WebSocket boleh menghantar data dalam masa nyata tanpa menyegarkan halaman.

2. Laksanakan alatan dan persekitaran yang diperlukan

Pelayan dengan sokongan WebSocket, seperti Node.js, Java, dll.
Alat pembangunan bahagian hadapan seperti Kod VS.
Pelayar yang menyokong WebSocket, seperti Chrome, Firefox, dsb.

3. Cipta bahagian pelayan

Pasang Node.js dan buat folder projek baharu.
Buka baris arahan dalam folder projek dan mulakan projek Node.js baharu. Jalankan arahan berikut:
```
 npm init
```
Pasang modul WebSocket. Jalankan arahan berikut:
```
 npm install websocket
```

Buat pelayan WebSocket menggunakan kod berikut:

const WebSocket = require('websocket').server;
const http = require('http');

const server = http.createServer((request, response) => {});
server.listen(8080, () => {
 console.log('Server is listening on port 8080');
});

const wsServer = new WebSocket({
 httpServer: server
});

wsServer.on('request', (request) => {
 const connection = request.accept(null, request.origin);
 
 connection.on('message', (message) => {
     // 处理接收到的消息
     console.log('Received message: ', message.utf8Data);
     
     // 向客户端发送消息
     connection.sendUTF('Message received: ' + message.utf8Data);
 });
 
 connection.on('close', (reasonCode, description) => {
     // 处理连接关闭事件
     console.log('Connection closed');
 });
});

Simpan dan mulakan pelayan, pastikan pelayan berjalan dengan betul.

4. Cipta pelanggan

Buat fail HTML baharu dalam folder projek dan namakannya index.html.

Masukkan kod berikut dalam index.html:

<!DOCTYPE html>
<html>
<head>
 <title>实时聊天室</title>
</head>
<body>
 <form id="chatForm">
     <input type="text" id="messageInput" placeholder="输入消息">
     <button type="submit">发送</button>
 </form>
 <div id="chatBox"></div>

 <script>
     const chatForm = document.getElementById('chatForm');
     const messageInput = document.getElementById('messageInput');
     const chatBox = document.getElementById('chatBox');

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

     socket.onopen = () => {
         console.log('连接已建立');
     };

     socket.onmessage = (event) => {
         const message = event.data;
         console.log('Received message: ', message);

         // 显示接收到的消息
         const messageElement = document.createElement('div');
         messageElement.innerText = message;
         chatBox.appendChild(messageElement);
     };

     chatForm.addEventListener('submit', (event) => {
         event.preventDefault();

         const message = messageInput.value;
         console.log('Sending message: ', message);

         // 发送消息到服务器
         socket.send(message);

         // 清空输入框
         messageInput.value = '';
     });
 </script>
</body>
</html>

Simpan dan buka fail index.html dengan penyemak imbas untuk memastikan klien berjalan seperti biasa.

5. Uji ruang sembang

Buka berbilang tab dalam penyemak imbas dan setiap tab bertindak sebagai pengguna bilik sembang.
Masukkan mesej dalam kotak input pada mana-mana tab dan hantarkannya.
Perhatikan mesej yang diterima oleh setiap tab untuk memastikan mesej itu disegerakkan dalam masa nyata.

Dengan langkah di atas, anda telah berjaya membina ruang sembang masa nyata yang ringkas menggunakan JavaScript dan WebSocket. Anda boleh mengembangkan dan mengoptimumkan mengikut keperluan sebenar, seperti menambah pengesahan pengguna, mencipta bilik, menghantar gambar, dsb.

Ringkasan: Artikel ini menerangkan cara membuat ruang sembang masa nyata menggunakan JavaScript dan WebSocket. WebSocket boleh mewujudkan sambungan berterusan antara pelanggan dan pelayan untuk mencapai penghantaran data yang pantas dan masa nyata. Saya harap artikel ini membantu anda dalam membina aplikasi komunikasi masa nyata.

Atas ialah kandungan terperinci Cara membuat ruang sembang masa nyata menggunakan JavaScript dan WebSocket. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Java JavaScript firefox chrome html 并发 JS http websocket

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript dan WebSocket: Cipta sistem sandaran data masa nyata yang cekapArtikel seterusnya：JavaScript dan WebSocket: Cipta sistem sandaran data masa nyata yang cekap

Artikel berkaitan

Lihat lagi