0

0

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

夢幻星辰

夢幻星辰

发布时间:2025-12-17 22:57:34

|

782人浏览过

|

来源于php中文网

原创

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');

之后监听关键事件:

立即学习Java免费学习笔记(深入)”;

Nimo.space
Nimo.space

智能画布式AI工作台

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

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

服务端怎么配合?

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

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 本身协议不复杂,难的是围绕它构建健壮、可维护的实时逻辑。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

442

2023.08.07

json是什么
json是什么

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

544

2023.08.23

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

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

322

2023.10.13

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

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

81

2025.09.10

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

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

553

2023.08.03

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

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

216

2023.09.04

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

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

1553

2023.10.24

字符串介绍
字符串介绍

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

640

2023.11.24

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

561

2026.02.13

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号