close

构建基本 WebSocket 服务器 Node.js

聊天 real-time 应用程序是一个很好的例子，展示了如何利用 WebSocket with Node.js 来创建交互式且引人入胜的用户体验。 在本文中，我们将探讨如何使用 和构建 real-time 聊天应用程序 。 WebSocket Node.js

第 1 步：设置环境

首先，确保 Node.js 您的计算机上已安装。 Terminal 为您的项目创建一个新文件夹，然后使用或 导航到该文件夹 Command Prompt ​​。

第 2 步：安装 WebSocket 库

和以前一样，使用“ws”库来安装该 WebSocket 库： 

npm install ws

第三步：搭建 WebSocket 服务器

创建一个名为的文件 server.js  并写入以下代码： 

// Import the WebSocket library  
const WebSocket = require('ws');  
  
// Create a WebSocket server  
const server = new WebSocket.Server({ port: 8080 });  
  
// List of connections(clients)  
const clients = new Set();  
  
// Handle new connections  
server.on('connection',(socket) => {  
    console.log('Client connected.');  
  
    // Add connection to the list  
    clients.add(socket);  
  
    // Handle incoming messages from the client  
    socket.on('message',(message) => {  
        // Send the message to all other connections  
        for(const client of clients) {  
            if(client !== socket) {  
                client.send(message);  
            }  
        }  
    });  
  
    // Handle connection close  
    socket.on('close',() => {  
        console.log('Client disconnected.');  
        // Remove the connection from the list  
        clients.delete(socket);  
    });  
});

第 4 步：创建用户界面（客户端）

创建一个名为的文件 index.html 并写入以下代码： 

<!DOCTYPE html>  
<html>  
<head>  
    <title>Real-Time Chat</title>  
</head>  
<body>  
    <input type="text" id="message" placeholder="Type a message">  
    <button onclick="send()">Send</button>  
    <div id="chat"></div>  
      
    <script>  
        const socket = new WebSocket('ws://localhost:8080');  
        socket.onmessage =(event) => {  
            const chat = document.getElementById('chat');  
            chat.innerHTML += '<p>' + event.data + '</p>';  
        };  
  
        function send() {  
            const messageInput = document.getElementById('message');  
            const message = messageInput.value;  
            socket.send(message);  
            messageInput.value = '';  
        }  
    </script>  
</body>  
</html>

第5步：运行服务器并打开浏览器

在 中 Terminal，运行以下命令来启动 WebSocket 服务器： 

node server.js

打开 Web 浏览器并导航到“ http://localhost:8080 ”以使用 real-time 聊天应用程序。

 

结论

恭喜！ 您已经使用 和成功构建了一个 real-time 聊天应用程序 。 该应用程序允许用户在. 您可以继续扩展和自定义此应用程序，以创建各种令人兴奋的功能！ WebSocket Node.js real-time