JavaScript中的WebSocket：使用Node.js创建实时应用

JavaScript中的WebSocket：使用Node.js创建实时应用

现代Web应用需要客户端和服务器之间进行即时数据交换。传统的基于请求-响应的HTTP协议不太适合对速度要求较高的场景：在线聊天、股票报价、多人在线游戏或通知系统。正是在这里，WebSocket协议派上了用场。在本文中，我们将了解WebSocket在JavaScript中的工作原理，并在Node.js上创建一个简单的实时应用。

什么是WebSocket，为什么需要它？

WebSocket是一种基于TCP连接的全双工通信协议。与始终由客户端发起请求的HTTP不同，WebSocket允许服务器在任何时候自主向客户端发送数据。这是通过在初始握手后建立一个持久的双向通道来实现的。

WebSocket相对于HTTP的主要优势：

• 低延迟 — 数据无需重复的HTTP头部即可即时传输。
• 节省流量 — 连接建立后开销最小。
• 持久连接 — 无需轮询或长轮询。
• 双向通信 — 服务器可以主动发起数据发送。

WebSocket非常适合实时应用：聊天、通知、协同文档编辑、金融终端和在线游戏。

在Node.js上安装和配置WebSocket服务器

为了在Node.js上使用WebSocket，我们将使用流行的ws库。它轻量、可靠且文档完善。

从安装开始：

npm init -ynpm install ws

现在创建一个简单的WebSocket服务器，它将接受连接并响应消息：

// server.jsconst WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {    console.log('客户端已连接');

    // 发送欢迎消息    ws.send('欢迎来到WebSocket服务器！');

    // 处理传入消息    ws.on('message', function incoming(message) {        console.log('收到: %s', message);        // 向所有连接的客户端发送响应        wss.clients.forEach(function each(client) {            if (client.readyState === WebSocket.OPEN) {                client.send(`回声: ${message}`);            }        });    });

    // 处理连接关闭    ws.on('close', function close() {        console.log('客户端已断开');    });});

console.log('WebSocket服务器已启动在 ws://localhost:8080');

使用命令node server.js启动服务器。服务器已准备好接受连接。

在JavaScript中创建客户端部分

客户端部分直接在浏览器中运行。WebSocket API内置于所有现代浏览器中，因此不需要额外的库。

创建一个带有简单界面的HTML页面：

<!DOCTYPE html><html><head>    <title>WebSocket聊天</title>    <style>        #messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }        #input { width: 300px; }    </style></head><body>    <h2>实时聊天</h2>    <div id="messages"></div>    <input type="text" id="input" placeholder="输入消息..." />    <button onclick="sendMessage()">发送</button>

    <script>        // 连接到WebSocket服务器        const socket = new WebSocket('ws://localhost:8080');

        // 处理o