小白 WebSocket 入门，10 分钟构建多人聊天室

前端

2024-02-07 03:56:29

前言

WebSocket 是一种网络协议，它允许浏览器与服务器建立持久双向连接，实现了实时通信，能够即时传输数据，非常适合构建聊天室、在线游戏、协作编辑等需要实时通信的应用。

本文将介绍 WebSocket 的基础知识，并指导您使用 JavaScript 和 Node.js 快速构建一个多人聊天室。

WebSocket 基础知识

WebSocket 协议

WebSocket 是一个基于 TCP 的协议，它使用 HTTP 作为握手协议，建立连接后，客户端和服务器可以双向发送数据。WebSocket 协议规定了客户端和服务器之间通信的格式和过程，以及如何建立、维护和关闭连接。

WebSocket 的优势

WebSocket 具有以下优势：

实时通信：WebSocket 可以实现实时通信，客户端和服务器之间的数据传输是即时的。
双向通信：WebSocket 支持双向通信，客户端和服务器都可以发送和接收数据。
低延迟：WebSocket 具有低延迟的特点，数据传输延迟很小。
轻量级：WebSocket 协议本身非常轻量级，不会对网络带宽造成太大负担。

WebSocket 的应用场景

WebSocket 的应用场景非常广泛，包括：

聊天室：WebSocket 非常适合构建聊天室，可以实现多人实时聊天。
在线游戏：WebSocket 也可用于构建在线游戏，可以实现玩家之间的实时互动。
协作编辑：WebSocket 还可用于构建协作编辑工具，可以实现多人同时编辑同一文档。
其他应用：WebSocket 还可用于构建其他需要实时通信的应用，如股票交易系统、在线投票系统等。

使用 JavaScript 和 Node.js 构建多人聊天室

前端代码

首先，我们需要创建客户端代码，使用 JavaScript 和 WebSocket API 建立与服务器的连接，并发送和接收数据。

// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:3000');

// 监听连接建立事件
socket.addEventListener('open', () => {
  console.log('WebSocket 连接已建立');
});

// 监听消息接收事件
socket.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  console.log(`收到消息：${data.message}`);
});

// 发送消息
const message = 'Hello, world!';
socket.send(JSON.stringify({ message }));

后端代码

然后，我们需要创建服务器端代码，使用 Node.js 和 WebSocket 库建立 WebSocket 服务器，并处理客户端的连接和数据。

// 引入 WebSocket 库
const WebSocket = require('ws');

// 创建 WebSocket 服务器
const server = new WebSocket.Server({ port: 3000 });

// 监听客户端连接事件
server.on('connection', (socket) => {
  console.log('客户端已连接');

  // 监听消息接收事件
  socket.on('message', (message) => {
    console.log(`收到消息：${message}`);

    // 将消息广播给所有客户端
    server.clients.forEach((client) => {
      if (client !== socket) {
        client.send(message);
      }
    });
  });

  // 监听客户端关闭连接事件
  socket.on('close', () => {
    console.log('客户端已断开连接');
  });
});