0

0

Javascript中的WebSocket如何工作_如何使用Javascript实现实时通信?

幻影之瞳

幻影之瞳

发布时间:2026-01-01 21:37:32

|

583人浏览过

|

来源于php中文网

原创

WebSocket是独立于HTTP的全双工TCP协议,仅握手阶段借用HTTP Upgrade头,后续通信脱离HTTP请求/响应模型,需专用API、服务端支持及手动重连。

javascript中的websocket如何工作_如何使用javascript实现实时通信?

WebSocket 是什么,和 HTTP 有什么根本区别?

WebSocket 不是 HTTP 的升级版,也不是“带长连接的 AJAX”。它是一个独立的、基于 TCP 的全双工通信协议,握手阶段借用了 HTTP(用 Upgrade: websocket 头),但一旦连接建立,后续数据就完全脱离 HTTP 格式,不再有请求/响应模型,客户端和服务端可以随时互发消息。

这意味着:
– 你不能用 fetch()XMLHttpRequest 模拟 WebSocket 行为;
– 服务端必须明确支持 WebSocket 协议(比如 Node.jsws 库,Python 用 websockets);
浏览器里没有“重连自动机制”,断线后得自己处理 onclose 并调用 new WebSocket(...)

如何创建并维持一个可用的 WebSocket 连接?

直接 new WebSocket(url) 很简单,但生产环境必须处理状态、错误和重连。关键点:

  • url 必须以 ws://(开发)或 wss://(生产)开头,不能是 http://
  • 连接未就绪时发消息会触发 onerror,必须等 readyState === WebSocket.OPEN 才能 send()
  • onopen 只表示握手成功,不代表服务端已准备好业务逻辑;建议约定一个 handshake 消息来回确认
  • 不要依赖 onerror 判断断连——它不总触发;主要靠 onclose + 定时 ping(服务端发、客户端响应)来探测死链
const socket = new WebSocket('wss://api.example.com/ws');

socket.onopen = () => {
  console.log('Connected');
  socket.send(JSON.stringify({ type: 'handshake', token: 'xxx' }));
};

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'pong') return; // 心跳响应
  console.log('Received:', data);
};

socket.onclose = (event) => {
  console.log('Disconnected', event.code, event.reason);
  // 这里触发重连逻辑(带退避)
};

为什么 send() 有时静默失败,或消息顺序错乱?

WebSocket.send() 是异步且无返回值的,失败不会抛异常,只可能触发 onerror(但不可靠)。更常见问题是:

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

  • 发送时 readyStateCLOSINGCLOSED → 消息直接丢弃,无提示
  • 高频调用 send() 而没做节流 → 浏览器内部缓冲区溢出,部分消息被静默截断(尤其在弱网下)
  • 服务端未按顺序处理消息 → WebSocket 本身保证帧顺序,但如果你在服务端用多线程/多进程处理不同消息,业务层顺序就无法保障

建议做法:
– 发送前检查 socket.readyState === WebSocket.OPEN
– 对关键操作加客户端序列号(如 { id: Date.now(), action: 'submit' }),服务端回执确认;
– 避免连续 send(),用 setTimeoutPromise.resolve().then() 让出 JS 主线程。

情感家园企业站5.0 多语言多风格版
情感家园企业站5.0 多语言多风格版

一套面向小企业用户的企业网站程序!功能简单,操作简单。实现了小企业网站的很多实用的功能,如文章新闻模块、图片展示、产品列表以及小型的下载功能,还同时增加了邮件订阅等相应模块。公告,友情链接等这些通用功能本程序也同样都集成了!同时本程序引入了模块功能,只要在系统默认模板上创建模块,可以在任何一个语言环境(或任意风格)的适当位置进行使用!

下载

如何安全地传递结构化数据?

WebSocket 原生只收发 stringArrayBuffer,JSON 是最常用选择,但要注意:

  • 别直接 socket.send(obj) —— 会转成 [object Object] 字符串,服务端解析失败
  • 大对象 JSON.stringify() 可能卡顿主线程,超 1MB 建议分片或改用 ArrayBuffer + Uint8Array
  • 服务端若未校验 Content-Type 或长度,恶意客户端可发超长字符串导致 OOM

推荐封装一层:

function sendJSON(socket, data) {
  if (socket.readyState !== WebSocket.OPEN) return false;
  try {
    socket.send(JSON.stringify(data));
    return true;
  } catch (e) {
    console.error('Send failed:', e);
    return false;
  }
}

真实项目中,协议层往往还需加版本号、签名、压缩标记(如 { v: 2, s: 'sha256...', d: { ... } }),这些都得前后端对齐。

WebSocket 看似简单,但真正稳定运行的关键不在连接建立那一刻,而在连接生命周期里的每一次 send、每一条 onmessage 解析、每一个 onclose 后的决策——这些细节没兜住,实时性就只是幻觉。

相关专题

更多
python开发工具
python开发工具

php中文网为大家提供各种python开发工具,好的开发工具,可帮助开发者攻克编程学习中的基础障碍,理解每一行源代码在程序执行时在计算机中的过程。php中文网还为大家带来python相关课程以及相关文章等内容,供大家免费下载使用。

716

2023.06.15

python打包成可执行文件
python打包成可执行文件

本专题为大家带来python打包成可执行文件相关的文章,大家可以免费的下载体验。

627

2023.07.20

python能做什么
python能做什么

python能做的有:可用于开发基于控制台的应用程序、多媒体部分开发、用于开发基于Web的应用程序、使用python处理数据、系统编程等等。本专题为大家提供python相关的各种文章、以及下载和课程。

743

2023.07.25

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

617

2023.07.31

python教程
python教程

Python已成为一门网红语言,即使是在非编程开发者当中,也掀起了一股学习的热潮。本专题为大家带来python教程的相关文章,大家可以免费体验学习。

1236

2023.08.03

python环境变量的配置
python环境变量的配置

Python是一种流行的编程语言,被广泛用于软件开发、数据分析和科学计算等领域。在安装Python之后,我们需要配置环境变量,以便在任何位置都能够访问Python的可执行文件。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

547

2023.08.04

python eval
python eval

eval函数是Python中一个非常强大的函数,它可以将字符串作为Python代码进行执行,实现动态编程的效果。然而,由于其潜在的安全风险和性能问题,需要谨慎使用。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

575

2023.08.04

scratch和python区别
scratch和python区别

scratch和python的区别:1、scratch是一种专为初学者设计的图形化编程语言,python是一种文本编程语言;2、scratch使用的是基于积木的编程语法,python采用更加传统的文本编程语法等等。本专题为大家提供scratch和python相关的文章、下载、课程内容,供大家免费下载体验。

699

2023.08.11

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

74

2025.12.31

热门下载

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

精品课程

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

共58课时 | 3.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

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

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