当前位置：首页 > 文章列表 > 文章 > 前端 > WebSocket实时通信教程详解

WebSocket实时通信教程详解

2026-01-21 13:15:59 0浏览收藏

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《WebSocket实现浏览器实时通信教程》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

WebSocket实现全双工通信，解决HTTP轮询效率低的问题，适用于实时场景；通过JavaScript的WebSocket API和Node.js的ws库可快速搭建双向通信，需注意连接管理、心跳、重连、安全及消息格式，提升应用实时性与用户体验。

使用WebSocket实现浏览器与服务器实时通信_javascript网络

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许浏览器与服务器之间实时交换数据。相比传统的 HTTP 请求-响应模式，WebSocket 能够实现真正的双向通信，特别适用于聊天应用、实时通知、在线协作等场景。

为什么选择 WebSocket？

HTTP 协议是无状态、短连接的，每次通信都需要客户端发起请求。当需要频繁获取服务器更新时（如股票行情、消息推送），轮询方式效率低、延迟高。WebSocket 在建立连接后，客户端和服务器可随时主动发送数据，大幅降低延迟和资源消耗。

WebSocket 基本用法

在浏览器中，JavaScript 提供了 WebSocket 构造函数，使用非常简单：

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

// 连接成功时触发
socket.onopen = function(event) {
  console.log('连接已建立');
  socket.send('你好，服务器！');
};

// 接收到服务器消息时触发
socket.onmessage = function(event) {
  console.log('收到消息：', event.data);
};

// 发生错误时触发
socket.onerror = function(event) {
  console.error('通信出错：', event);
};

// 连接关闭时触发
socket.onclose = function(event) {
  console.log('连接已关闭');
};

Node.js 实现 WebSocket 服务端

可以使用 ws 库快速搭建 WebSocket 服务器。先安装依赖：

npm install ws

然后创建服务端代码：

const WebSocket = require('ws');

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

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

  // 监听客户端消息
  ws.on('message', function(data) {
    console.log('收到：' + data);

    // 将消息广播给所有客户端
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`广播：${data}`);
      }
    });
  });

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

运行该脚本后，浏览器即可通过 ws://localhost:8080 连接并通信。