javascript中的WebSocket是什么_如何实现实时通信-js教程-PHP中文网

javascript中的WebSocket是什么_如何实现实时通信

夜晨

发布： 2025-12-19 20:49:02

原创

116人浏览过

WebSocket是浏览器与服务器间全双工、持久化的实时通信协议，通过HTTP握手升级后长期连接，支持服务端主动推送、轻量数据帧及文本/二进制传输。

javascript中的websocket是什么_如何实现实时通信

WebSocket 是浏览器与服务器之间建立的全双工、持久化通信通道，能实现真正的实时数据交换，比轮询或长连接更高效。

WebSocket 和 HTTP 的核心区别

HTTP 是“请求-响应”模式，每次通信都要重新握手，不适合高频交互。WebSocket 在初始 HTTP 握手后升级为独立协议，连接保持打开状态，双方可随时主动发消息。

一次连接，长期有效（除非异常断开或手动关闭）
服务端可以主动推送数据，无需客户端反复询问
数据帧轻量，头部开销小，适合小数据频繁传输
支持文本（UTF-8）和二进制数据

前端如何创建并使用 WebSocket

浏览器原生支持 WebSocket 构造函数，用法简单：

const ws = new WebSocket('wss://example.com/chat'); // wss 是加密版

ws.onopen = () => {
  console.log('连接成功');
  ws.send('Hello Server');
};

ws.onmessage = (event) => {
  console.log('收到消息：', event.data); // 可能是字符串或 Blob
};

ws.onerror = (error) => {
  console.error('连接出错', error);
};

ws.onclose = () => {
  console.log('连接已关闭');
};

登录后复制

注意：必须等 onopen 触发后再调用 send()，否则会报错；发送前建议检查 ws.readyState === WebSocket.OPEN。

立即学习“Java免费学习笔记（深入）”；

思乐微信商城微分销系统

思乐微信商城微分销系统是以.net+access/mssql进行开发的微信分销系统。基于微信朋友圈的传播，是打造以分销商为中心的全新微信分销体验。让粉丝实时有效的获取朋友圈流量并快速分享购买分佣。因为是基于微信，所以要在微信上体验才更好。关注我们的微信核心功能：1、自动提示用户关注微信，解决一般程序无关注微信公众号的过程2、只要通过链接进一次，不过好久注册，什么方面注册，只要是用微信注册的，都会算

查看详情

后端需配合 WebSocket 服务（以 Node.js + ws 库为例）

浏览器不能直接连数据库或文件系统，必须有服务端 WebSocket 服务器中转：

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

wss.on('connection', (ws, req) => {
  console.log('新用户接入');

  ws.on('message', (data) => {
    console.log('收到：', data.toString());
    // 广播给所有在线用户（简单示例）
    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`广播：${data}`);
      }
    });
  });

  ws.on('close', () => {
    console.log('用户断开');
  });
});

登录后复制

真实项目中通常用成熟的方案，如 Socket.IO（兼容性更好、自带心跳和降级）、ws（轻量高效）、或云服务（如 Pusher、Firebase Realtime Database）。