WebSocket：让双端通信轻松搞定

前端

2023-09-19 01:46:14

在这个实时数据盛行的时代，双端通信已成为构建动态交互式 web 应用不可或缺的关键。WebSocket 应运而生，它是一种轻量级双向通信协议，旨在在浏览器和服务器之间建立持久连接，实现近乎实时的无缝数据交换。

本文将带你踏上 WebSocket 的入门之旅，从其概念和优势讲起，再深入探讨其实现，最后通过一个循序渐进的指南助你构建一个小型的双端通信应用。让我们开始吧！

WebSocket 的魅力

WebSocket 作为一个强大的通信协议，拥有以下优势：

双向通信： 浏览器和服务器可以同时发送和接收数据，消除了传统 HTTP 请求-响应模式的限制。
持久连接： 建立后，WebSocket 连接一直保持打开状态，避免了频繁的连接和断开操作。
实时传输： 数据可以在连接建立后立即发送，实现近乎实时的通信。
低延迟： WebSocket 采用了二进制帧协议，数据传输效率高，延迟低。
低带宽占用： WebSocket 使用高效的压缩算法，最大限度地降低了带宽占用。

实现 WebSocket

要实现 WebSocket，需要在客户端和服务器端进行如下步骤：

客户端：

创建 WebSocket 对象：js new WebSocket('ws://localhost:8080')
监听事件：js websocket.onmessage = (event) => { /* 处理接收到的数据 */ };

服务器端：

使用 WebSocket 库或框架：例如 Node.js 中的 socket.io 或 Java 中的 javax.websocket
创建 WebSocket 服务器：js server.on('connection', (socket) => { /* 处理客户端连接 */ });

构建双端通信应用

现在，让我们通过一个简单的示例来说明如何使用 WebSocket 构建一个双端通信应用：

服务器端（Node.js）：

const socketIO = require('socket.io');

const io = socketIO(8080);

io.on('connection', (socket) => {
  console.log('新客户端连接');

  socket.on('message', (data) => {
    console.log('收到客户端消息：', data);
    socket.emit('message', `服务器回应：${data}`);
  });

  socket.on('disconnect', () => {
    console.log('客户端断开连接');
  });
});

客户端（HTML/JavaScript）：

<!DOCTYPE html>
<html>
  <head>
    <script src="socket.io.js"></script>
    <script>
      const socket = io('ws://localhost:8080');

      socket.on('connect', () => {
        console.log('连接服务器成功');
        socket.emit('message', '你好，服务器！');
      });

      socket.on('message', (data) => {
        console.log('收到服务器消息：', data);
      });

      socket.on('disconnect', () => {
        console.log('与服务器断开连接');
      });
    </script>
  </head>
  <body>
    <h1>WebSocket 双端通信</h1>
  </body>
</html>