如何使用JavaScript和WebSocket打造即時聊天室-js教程-PHP中文網

首頁

web前端

js教程

如何使用JavaScript和WebSocket打造即時聊天室

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 17, 2023 pm 03:06 PM

javascriptwebsocket聊天室

如何使用JavaScript和WebSocket打造即時聊天室

#簡介：隨著網路的不斷發展，即時通訊變得越來越重要。即時聊天應用程式已成為許多網站和應用程式的標配。本文將介紹如何使用JavaScript和WebSocket技術建立一個簡單的即時聊天室。

一、什麼是WebSocket
WebSocket是一種提供在客戶端和伺服器之間進行雙向即時通訊的協定。相較於傳統的HTTP協議，WebSocket具有更低的延遲和更高的即時性，能夠在客戶端和伺服器之間建立持久的連線。 WebSocket可以在不刷新頁面的情況下即時傳輸資料。

二、實作所需工具與環境

一台擁有WebSocket支援的伺服器，如Node.js、Java等。
前端開發工具，如VS Code。
一個支援WebSocket的瀏覽器，如Chrome、Firefox等。

三、建立伺服器端

安裝Node.js並建立一個新的專案資料夾。
在專案資料夾中開啟命令列，並初始化一個新的Node.js專案。執行以下指令：
```
 npm init
```
安裝WebSocket模組。執行以下命令：
```
 npm install websocket
```

使用以下程式碼建立一個WebSocket伺服器：

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');
 });
});

儲存並啟動伺服器，確保伺服器正常運作。

四、建立客戶端

在專案資料夾中建立一個新的HTML文件，命名為index.html。

在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>

儲存並用瀏覽器開啟index.html文件，確保客戶端正常運作。

五、測試聊天室