Javascript中的WebSocket如何工作?

WebSocket通过HTTP升级握手建立持久全双工连接:客户端发含Upgrade、Sec-WebSocket-Key的请求,服务器返回101状态及Sec-WebSocket-Accept校验;连接后通过onopen/onmessage/onclose/onerror事件收发数据,以帧而非HTTP报文传输,支持文本、二进制、Ping/Pong;需用wss://加密,服务器需校验Origin,原生无自动重连。

javascript中的websocket如何工作?

WebSocket 在 JavaScript 中通过一次 HTTP 握手建立持久、全双工的 TCP 连接,之后客户端和服务器可随时互发数据,无需重复请求。

握手阶段:用 HTTP 升级协议

浏览器发起一个带特殊头的 HTTP 请求:

Upgrade: websocketConnection: Upgrade 表明想切换协议 Sec-WebSocket-Key 是客户端生成的随机 Base64 字符串,用于防伪造 服务器验证后,返回 HTTP 101 Switching Protocols 状态码 响应头含 Sec-WebSocket-Accept —— 由客户端密钥经固定算法计算得出,供客户端校验

握手成功,连接就脱离 HTTP,进入 WebSocket 帧通信模式。

连接建立后:监听事件收发消息

JS 使用 WebSocket 构造函数创建实例,并绑定关键事件:

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

onopen:连接就绪,可立即调用 socket.send() 发送首条消息 onmessage:收到数据时触发,event.data 是字符串或 ArrayBuffer onclose:连接关闭(可能是主动断开或网络中断),event.codeevent.reason 可辅助诊断 onerror:发生不可恢复错误(如 URL 无效、跨域被拒、TLS 握手失败)时触发

数据传输:帧结构与双向自由通信

所有数据都封装成 WebSocket 帧传输,不是 HTTP 报文:

文本消息自动按 UTF-8 编码,二进制数据需用 ArrayBufferBlob 支持 Ping/Pong 控制帧 维持连接活跃,防止中间代理超时断连 客户端和服务器地位对等,都能主动发消息,不依赖“请求-响应”流程 连接期间无请求开销,延迟低、带宽省,适合高频小数据(如聊天、行情、协作编辑)

连接管理:安全、跨域与稳定性

实际使用中需注意几个关键点:

wss:// 对应 HTTPS,强制加密;ws:// 仅限开发或内网环境 WebSocket 不受浏览器同源策略限制,但服务器必须显式允许来源(如检查 Origin 头) 原生 API 不自带重连,需手动实现:监听 onclose 后延时重建 new WebSocket(url) 发送前建议检查 socket.readyState === WebSocket.OPEN,避免报错

基本上就这些。

以上就是Javascript中的WebSocket如何工作?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1543502.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 15:06:19
下一篇 2025年12月21日 15:06:33

相关推荐

  • javascript地理位置如何获取_如何使用Geolocation API?

    JavaScript通过Geolocation API获取地理位置,需HTTPS安全上下文,调用getCurrentPosition()一次性获取经纬度,watchPosition()持续监听,注意权限、错误处理及隐私合规。 JavaScript 获取地理位置主要靠浏览器内置的 Geolocatio…

    2025年12月21日
    000
  • JavaScript中的代理是什么_它如何拦截和自定义对象操作呢

    Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的代理机制,通过 handler 中的 trap(如 get、set、has 等)控制访问行为,支持响应式、验证、日志等场景,但不递归代理嵌套对象且有性能开销。 JavaScript 中的代理(Proxy)是一个包装对象,用来拦截并…

    2025年12月21日
    000
  • javascript指令是什么_如何自定义Vue或Angular的指令?

    JavaScript指令是前端框架为扩展HTML功能设计的可复用行为封装机制;Vue通过v-指令及bind/inserted/update/componentUpdated/unbind钩子实现,Angular则用@Directive区分属性与结构指令并强调类型安全。 JavaScript 指令不是…

    2025年12月21日
    000
  • JavaScript对象如何创建_如何访问其属性?

    JavaScript对象常用字面量创建,访问属性时点号适用于合法标识符,方括号支持动态名、空格及特殊字符;访问不存在属性返回undefined,嵌套需用可选链防错。 JavaScript对象可以用多种方式创建,访问属性也有点号和方括号两种常用写法,关键看属性名是否合法、是否动态。 创建对象的常见方式…

    2025年12月21日
    000
  • JavaScript混入是什么_如何实现多重继承?

    JavaScript通过混入(Mixin)模式模拟多重继承,将多个对象的方法和属性复制到目标对象或原型上,实现组合式功能复用;常用Object.assign()或高阶类工厂实现,需注意方法冲突、构造逻辑缺失、this指向及私有字段限制。 JavaScript 本身不支持传统面向对象语言中的多重继承,…

    2025年12月21日
    000
  • javascript如何实现移动应用_React Native和Flutter有什么区别

    JavaScript可通过React Native开发原生移动应用:用JS写逻辑,通过原生桥接调用iOS/Android真实UI组件,渲染原生界面,性能接近原生;采用React风格开发,支持热重载,需配置Node.js、Xcode等环境。 JavaScript 本身不能直接开发原生移动应用,但可以通…

    2025年12月21日
    000
  • 什么是JavaScript的代理和反射?

    Proxy 和 Reflect 是配合使用的对象行为控制机制:Proxy 拦截操作,Reflect 提供与之对应的标准化底层方法,二者结合可实现安全、可靠、可维护的元编程逻辑。 JavaScript 的代理(Proxy)和反射(Reflect)是一对配合使用的机制,用来更精细地控制对象的行为。Pro…

    2025年12月21日
    000
  • javascript async/await是什么_如何用它简化异步代码?

    async/await 是 JavaScript 中基于 Promise 的异步语法糖,使异步代码更直观;async 函数自动返回 Promise,await 暂停执行等待 Promise 完成,需用 try/catch 错误处理,并行任务应配合 Promise.all()。 async/await…

    2025年12月21日
    000
  • 什么是Promise对象_javascript中如何处理异步操作?

    Promise 是 JavaScript 处理异步操作的标准对象,代表未来完成或失败的操作,具有 pending、fulfilled、rejected 三种不可逆状态,支持链式调用与错误传递,并提供 Promise.all()、race()、allSettled() 等静态方法协调多个异步任务。 P…

    2025年12月21日
    000
  • 如何用JavaScript实现一个模态框组件_如何管理焦点和可访问性?

    模态框真正可用需聚焦管理与可访问性:打开时自动聚焦首个可聚焦元素,限制Tab键焦点范围,关闭后恢复原焦点并正确设置ARIA属性。 模态框(Modal)要真正可用,不能只靠显示隐藏和遮罩层——焦点管理与可访问性(a11y)是核心。否则键盘用户无法操作、屏幕阅读器无法理解上下文,甚至可能被困在模态框里出…

    2025年12月21日
    000
  • javascript如何迭代数组_ forEach怎么用

    forEach是JavaScript中用于遍历数组并执行副作用操作的常用方法,接收含item、index、array参数的回调函数,但无法中断循环、不返回新数组、不能增删元素。 JavaScript 中迭代数组最常用的方法之一是 forEach,它能让你对数组中每个元素执行一次指定的操作,写法简洁、…

    2025年12月21日
    000
  • 什么是Javascript的立即执行函数表达式?

    IIFE是定义后立即执行的函数表达式,用于创建独立作用域、避免全局污染;需用括号或运算符强制解析为表达式,支持传参,现代可用模块和块级作用域替代,但老项目、循环绑定索引等场景仍适用。 立即执行函数表达式(IIFE,Immediately Invoked Function Expression)是 J…

    2025年12月21日
    000
  • Javascript中的可选链操作符是什么?

    可选链操作符(?.)用于安全访问嵌套属性或调用方法,遇 null/undefined 时返回 undefined 而非报错;支持属性访问、方法调用、数组索引,常与 ?? 结合提供默认值,但不可用于赋值或 delete。 可选链操作符(?.)是 JavaScript 中用于安全访问嵌套对象属性或调用方…

    2025年12月21日
    000
  • JavaScript下载功能_javascript文件操作

    前端可通过Blob和a[download]实现文件下载,如文本、JSON、CSV等;利用URL.createObjectURL创建临时链接,动态触发下载,适用于导出数据场景。 在前端开发中,JavaScript 本身不能直接操作用户的文件系统,出于安全考虑,浏览器限制了对本地文件的读写权限。但可以通…

    2025年12月21日
    000
  • javascript的性能如何优化_有哪些常见的优化技巧?

    JavaScript性能优化的核心是减少主线程阻塞、降低内存占用、提升执行效率,关键在于让浏览器更轻松完成渲染和交互,需聚焦重排重绘控制、高效数组操作、合理事件与内存管理、代码分割懒加载,并借助Performance面板持续定位瓶颈。 JavaScript性能优化的核心是减少主线程阻塞、降低内存占用…

    2025年12月21日
    000
  • javascript中的全屏API是什么_如何让元素进入全屏模式

    全屏 API 通过 requestFullscreen() 请求元素独占显示并隐藏浏览器 UI,需用户手势触发,配合 fullscreenElement、fullscreenEnabled 属性及 fullscreenchange、fullscreenerror 事件监听状态变化。 JavaScri…

    2025年12月21日
    000
  • javascript中的TypeScript是什么_为什么它越来越流行

    TypeScript 是 JavaScript 的超集,提供类型系统以提升开发效率与代码可靠性。它支持渐进式采用、智能推断、编辑器增强、安全重构,并已成为现代前端开发标配。 JavaScript 中的 TypeScript 不是一种替代语言,而是一个带类型系统的 JavaScript 超集——所有合…

    2025年12月21日
    000
  • javascript的生成器是什么_它如何控制函数执行?

    JavaScript生成器是能暂停和恢复执行的特殊函数,用function*声明并配合yield控制节奏,每次next()返回{value, done}对象,实现手动执行控制与异步协作。 JavaScript 的生成器(Generator)是一种特殊函数,它能暂停和恢复执行,让你手动控制函数的运行节…

    2025年12月21日
    000
  • 如何用JavaScript实现一个视频播放器_如何自定义控件和处理全屏?

    JavaScript 实现原生视频播放器需隐藏默认控件,通过事件监听控制播放/暂停、进度拖拽、音量与全屏;核心是同步 video 元素状态与自定义 UI,处理 loadedmetadata、timeupdate、fullscreenchange 等事件,并优化悬停显示、自动隐藏及移动端兼容性。 用 …

    2025年12月21日
    000
  • JavaScript面向对象_javascript编程思想

    JavaScript通过原型机制实现面向对象编程,核心是构造函数、原型链与实例的关系;使用构造函数创建对象实例,并将共享方法挂载到prototype上以节省内存;继承通过原型链实现,子类可借用父类构造并链接原型,ES6的class仅为语法糖,底层仍基于原型。 JavaScript 虽然不是传统意义上…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信