手把手教你用 WebSocket 创建简易版聊天室，告别枯燥开发

2022-12-29 03:03:41

WebSocket：实时通信的利器

在当今互联互通的世界里，实时通信已成为人们日常生活不可或缺的一部分。从即时通讯应用程序到在线游戏，再到协作平台，实时数据传输对于无缝交互至关重要。WebSocket，作为一种尖端的网络协议，以其双向全双工通信、低延迟和高效率等特性，成为实时通信领域的佼佼者。

WebSocket 的原理

WebSocket 本质上是基于 TCP 协议的通信协议。与传统的 HTTP 协议不同，WebSocket 允许客户端和服务器在建立连接后保持持续的通信，无需反复建立和断开连接。通过 WebSocket，客户端和服务器可以同时发送和接收数据，实现真正的双向全双工通信。

WebSocket 的应用场景

WebSocket 的应用场景广泛，包括但不限于：

即时通讯应用程序： WebSocket 可用于构建即时通讯应用程序，提供用户之间的实时聊天、文件传输等功能。
在线游戏： WebSocket 可用于构建在线游戏，实现玩家之间的实时对战、互动等功能。
协作平台： WebSocket 可用于构建协作平台，实现多人同时编辑文档、共享屏幕等功能。
金融交易系统： WebSocket 可用于构建金融交易系统，实现实时报价、交易等功能。

WebSocket 的优势

相较于传统的 HTTP 协议，WebSocket 拥有以下优势：

双向全双工通信： WebSocket 允许客户端和服务器同时发送和接收数据，实现真正的实时通信。
低延迟： WebSocket 采用二进制数据传输，延迟极低，非常适合需要快速响应的应用程序。
高效率： WebSocket 使用单一的 TCP 连接，避免了 HTTP 请求-响应的开销，大大提高了通信效率。
可扩展性： WebSocket 支持在单台服务器上同时处理大量连接，非常适合构建高并发应用程序。

使用 Node.js 构建简易聊天室

Node.js-WebSocket 是一个易于使用的 WebSocket 库，非常适合初学者学习和使用。下面我们将使用 Node.js-WebSocket 构建一个简易的聊天室。

服务器端

const WebSocketServer = require('nodejs-websocket');

const server = WebSocketServer.createServer(function(conn) {
  // 新建连接时触发
  conn.on('open', function() {
    console.log('New connection');
  });

  // 接收到消息时触发
  conn.on('text', function(str) {
    // 将消息广播给其他客户端
    server.connections.forEach(function(client) {
      if (client !== conn) {
        client.sendText(str);
      }
    });
  });

  // 连接关闭时触发
  conn.on('close', function() {
    console.log('Connection closed');
  });

  // 连接出现错误时触发
  conn.on('error', function(err) {
    console.log('Error: ' + err.message);
  });
});

server.listen(8080);

客户端

const WebSocketClient = require('nodejs-websocket');

const client = WebSocketClient.connect('ws://localhost:8080');

client.on('connect', function() {
  // 连接成功时触发
  console.log('Connected');
});

client.on('text', function(str) {
  // 接收到消息时触发
  console.log('Received: ' + str);
});

client.on('close', function() {
  // 连接关闭时触发
  console.log('Closed');
});

client.on('error', function(err) {
  // 连接出现错误时触发
  console.log('Error: ' + err.message);
});

client.sendText('Hello WebSocket!');