当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript实现WebSocket实时通信

JavaScript实现WebSocket实时通信

2025-11-21 13:54:28 0浏览收藏

从现在开始，我们要努力学习啦！今天我给大家带来《JavaScript实现WebSocket双向通信》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

WebSocket通过一次HTTP握手建立持久化TCP连接，实现客户端与服务器间的全双工实时通信，适用于聊天室、通知等高频交互场景；前端使用原生API监听open、message等事件，后端可用Node.js的ws库创建服务并处理连接与消息收发，实际应用需考虑心跳检测、JSON消息格式、WSS加密及多实例同步等细节。

JavaScript WebSocket双向通信协议实现

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许客户端与服务器之间实时交换数据。相比传统的 HTTP 请求-响应模式，WebSocket 能实现真正的双向通信，非常适合需要高频交互的应用场景，比如聊天室、实时通知、在线协作等。

WebSocket 基本概念

WebSocket 协议通过一次 HTTP 握手升级连接，之后客户端和服务器可以随时主动发送数据。连接建立后，数据以“帧”（frame）的形式传输，支持文本和二进制格式。

关键特点包括：

持久化连接，避免重复握手开销
低延迟，适合实时通信
支持双向通信，服务端可主动推送消息
基于事件驱动模型（open、message、error、close）

前端 JavaScript 实现

在浏览器中使用原生 WebSocket API 可轻松建立连接并监听事件。

const socket = new WebSocket('ws://localhost:8080');

socket.addEventListener('open', () => {
  console.log('连接已建立');
  socket.send('你好，服务器！');
});

socket.addEventListener('message', (event) => {
  console.log('收到消息：', event.data);
});

socket.addEventListener('error', (err) => {
  console.error('连接出错：', err);
});

socket.addEventListener('close', () => {
  console.log('连接已关闭');
});

说明：

ws:// 表示普通 WebSocket，wss:// 为加密版本（类似 HTTPS）
使用 addEventListener 或直接赋值 onmessage 等属性均可
send() 方法可用于发送字符串或 Blob/ArrayBuffer 数据

Node.js 后端实现

使用 Node.js 搭建 WebSocket 服务，推荐使用 ws 库（轻量高效）。

const WebSocket = require('ws');

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

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

  ws.on('message', (data) => {
    console.log('收到:', data.toString());
    
    // 回传消息给客户端
    ws.send(`服务器回复: ${data}`);
  });

  ws.send('欢迎连接到 WebSocket 服务！');
});

说明：