javascript的WebSocket是什么_如何实现实时双向通信?

星磊酱_2065

星磊酱_2065

2025-12-17

802人浏览

原创

WebSocket是浏览器与服务器间持久化全双工通信通道,通过一次Upgrade握手复用TCP连接,以帧轻量传输数据,解决轮询延迟高、开销大等问题,适用于聊天、实时通知等场景。

javascript的websocket是什么_如何实现实时双向通信?

WebSocket 是浏览器与服务器之间建立的持久化、全双工通信通道,能真正实现客户端和服务器实时双向收发数据。它不像 HTTP 那样每次请求都要重新握手、带大量头部,而是通过一次升级(Upgrade)握手后,复用同一个 TCP 连接长期保持连接,后续数据以帧(frame)形式轻量传输。

为什么需要 WebSocket?

传统轮询(Polling)或长轮询(Long Polling)有明显缺陷:频繁建连开销大、延迟高、服务器压力大、无法真正“即时”响应。而 WebSocket 解决了这些——连接建立后,双方随时可主动发消息,适合聊天、协作编辑、实时通知、行情推送等场景。

如何创建并使用 WebSocket?

前端只需一行代码即可发起连接(注意协议是 ws:// 或安全的 wss://):

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

之后监听关键事件:

  • onopen:连接成功,可立即发送初始化消息
  • onmessage:收到服务器推送的数据(event.data 可能是字符串或 Blob)
  • onerror:发生网络或协议错误(注意:这里不触发重连,需手动处理)
  • onclose:连接关闭(可检查 event.code 和 event.reason 判断原因)

发送消息也很简单:ws.send('hello'),支持字符串、ArrayBuffer、Blob。

jm-jsjkxyjs02-zlm-405
jm-jsjkxyjs02-zlm-405

使用约定式提交(Conventional Commits)生成标准化的 Git 提交信息。适用于以下场景: (1) 暂存更改时需要提交信息; (2) 审查 diff 时希望获得结构化摘要; (3) 编写 PR 描述或变更日志(changelog)条目; (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff,并生成按类型(type)划分范围的提交信息。

下载

服务端怎么配合?

主流语言都有成熟 WebSocket 库。以 Node.js 的 ws 库为例:

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 !== ws && client.readyState === WebSocket.OPEN) {
        client.send(`广播:${data}`);
      }
    });
  });

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

关键点:

  • 服务端需正确响应 HTTP Upgrade 请求,完成 WebSocket 握手
  • 每个连接对应一个 ws 实例,可绑定独立事件
  • 注意检查 readyState 再发送,避免因连接异常导致报错
  • 生产环境务必加心跳保活(如每 30 秒 send ping / expect pong),防止中间代理断连

实际开发中要注意什么?

WebSocket 很强大,但不是“万能胶”。用之前得想清楚:

  • 浏览器兼容性没问题(IE10+,所有现代浏览器都支持)
  • 必须走 HTTPS 域名才能用 wss://(本地 ws://localhost 除外)
  • 连接不稳定时要实现自动重连(带退避策略,比如 1s → 2s → 4s…)
  • 消息需自行设计协议(如 JSON 格式 + type 字段区分消息类型),服务端也要做校验和防刷
  • 单页应用切换路由时,记得在组件卸载前调用 ws.close(),避免内存泄漏

基本上就这些。WebSocket 本身协议不复杂,难的是围绕它构建健壮、可维护的实时逻辑。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2235

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3582

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1196

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

4139

7

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1838

5

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2964

5

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

2023.10.24

6244

49

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

2023.11.24

6169

6

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

2024.03.22

7734

16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习