3. 教你用WebSocket构建一个实时聊天应用

系列目录

1.探索WebSocket：实时网络的心跳！

2.WebSocket进阶: 深入探究实时通信的最佳实践与优化技巧

1. 了解聊天室的基本需求

在聊天室中，我们通常需要实现以下功能：
● 用户连接和断开时的通知。
● 用户发送和接收消息的实时更新。
● 管理多用户的消息同步。
● 可扩展的架构以便未来添加更多功能，比如私聊、消息存储等。

2. WebSocket基础: 建立连接

WebSocket提供了一个轻松的API，能够在浏览器和服务器之间建立持久连接。每当用户打开聊天室时，客户端与服务器之间进行WebSocket连接，之后，客户端和服务器之间的通信就不需要重复建立HTTP请求。

基本的WebSocket连接步骤如下：

1. 客户端发送连接请求
2. 服务器响应并确认连接
3. 建立WebSocket连接后，双方可以实时发送和接收消息。

3. 项目架构及代码实现

后端源码： 使用Node.js 搭建 WebSocket服务器
我们可以使用Node.js的ws 库来搭建WebSocket服务器，监听每一个连接的客户端，转发消息到所有用户，从而实现实时消息的广播。
首先，安装ws库：

npm install ws

创建一个服务器文件server.js:

// server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({
    port: 8080 });

const clients = new Set();

wss.on('connection',(ws) = >{
   
  console.log("A new user connected")
  client.add(ws);

	ws.on('message',(message) => {
   
    console.log(`Receieve message: ${
     message}`);
    // 广播信息到所有连接的客户端
    clients.forEach(client = >{
   
      if (client.readyState == WebSocket.OPEN){
   
        client.send(message)
      }
    })；
  })；
  
  ws.on('close',() = >{
   
    console.log("A user disconnected.")
		client.delete(ws);
  });
});

console.log("WebSocket server is running on ws://localhost:8080")

在这个例子中，我们创建了一个WebSocket服务器，监听端口8080。当一个新客户端连接时࿰