讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript中什么是WebSocket_如何建立连接

夏丽姑娘_6109

夏丽姑娘_6109

发布时间:2025-12-31 16:27:58

|

713人浏览过

|

来源于php中文网

原创

WebSocket是基于TCP的全双工通信协议,通过HTTP升级握手(101状态码)建立长连接,支持文本/二进制帧传输,JavaScript中用new WebSocket(url)创建,监听open、message、error、close事件,但需手动处理重连与readyState校验。

javascript中什么是websocket_如何建立连接

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,它让浏览器和服务器之间可以持续保持连接,实时收发数据,不像 HTTP 那样每次请求都要重新建立连接。

WebSocket 和 HTTP 的关键区别

HTTP 是“请求-响应”模式:浏览器发一次请求,服务器回一次响应,连接就断了。WebSocket 是“长连接”:握手阶段用 HTTP 升级(Upgrade),成功后就切换成 WebSocket 协议,双方随时能主动发消息。

  • 握手时用 HTTP 101 Switching Protocols 状态码表示升级成功
  • 连接建立后,数据以帧(frame)形式传输,开销小、延迟低
  • 支持文本(UTF-8)和二进制数据
  • 自动处理重连、心跳、错误通知等需手动实现的逻辑(但实际项目中常需额外封装)

如何在 JavaScript 中建立 WebSocket 连接

使用 new WebSocket(url) 即可发起连接,url 必须是 ws://(非加密)或 wss://(加密,推荐,类似 HTTPS)开头。

示例:

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

chartjs-reporter
chartjs-reporter

此技能用于在用户需要将结构化数据(查询结果、CSV 摘要、JSON 记录或 Python 字典/列表)转换为独立的 HTML 页面时使用。

下载
const ws = new WebSocket('wss://echo.websocket.org');

连接过程有四个关键事件:

  • open:连接成功,可以开始发送数据
  • message:收到服务器发来的消息
  • error:连接出错(如网络中断、URL 错误),不会自动重试
  • close:连接被关闭(可能是服务端关闭,也可能是调用 ws.close())

典型用法:

ws.onopen = () => { console.log('已连接'); ws.send('Hello Server'); };
ws.onmessage = (event) => { console.log('收到:', event.data); };
ws.onerror = (err) => { console.error('连接异常', err); };
ws.onclose = (e) => { console.log('连接关闭', e.code, e.reason); };

注意事项和常见问题

WebSocket 不是万能的,用之前要注意:

  • 浏览器兼容性良好(现代浏览器都支持),但旧版 IE 不支持
  • 服务端必须部署 WebSocket 服务(如 Node.js 的 ws 库、Socket.IO 后端,或 Nginx 正确配置 proxy_pass + Upgrade 头)
  • 跨域不受限制(不像 Ajax),但服务端仍可校验 Origin 头做简单防护
  • 没有内置重连机制,生产环境建议自己加重连逻辑(比如指数退避)
  • 避免在未检查 ws.readyState === WebSocket.OPEN 时调用 send(),否则会报错

基本上就这些。WebSocket 本身 API 很轻量,难的是服务端配合和连接生命周期管理。

热门AI工具

更多
切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
nginx 重启
nginx 重启

nginx重启对于网站的运维来说是非常重要的,根据不同的需求,可以选择简单重启、平滑重启或定时重启等方式。本专题为大家提供nginx重启的相关的文章、下载、课程内容,供大家免费下载体验。

403

2023.07.27

nginx 配置详解
nginx 配置详解

Nginx的配置是指设置和调整Nginx服务器的行为和功能的过程。通过配置文件,可以定义虚拟主机、HTTP请求处理、反向代理、缓存和负载均衡等功能。Nginx的配置语法简洁而强大,允许管理员根据自己的需要进行灵活的调整。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

3607

2023.08.04

nginx配置详解
nginx配置详解

NGINX与其他服务类似,因为它具有以特定格式编写的基于文本的配置文件。本专题为大家提供nginx配置相关的文章,大家可以免费学习。

6345

2023.08.04

tomcat和nginx有哪些区别
tomcat和nginx有哪些区别

tomcat和nginx的区别:1、应用领域;2、性能;3、功能;4、配置;5、安全性;6、扩展性;7、部署复杂性;8、社区支持;9、成本;10、日志管理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

581

2024.02.23

nginx报404怎么解决
nginx报404怎么解决

当访问 nginx 网页服务器时遇到 404 错误,表明服务器无法找到请求资源,可以通过以下步骤解决:1. 检查文件是否存在且路径正确;2. 检查文件权限并更改为 644 或 755;3. 检查 nginx 配置,确保根目录设置正确、没有冲突配置等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1496

2024.07.09

Nginx报404错误解决方法
Nginx报404错误解决方法

解决方法:只需要加上这段配置:try_files $uri $uri/ /index.html;即可。想了解更多Nginx的相关内容,可以阅读本专题下面的文章。

3978

2024.08.07

nginx部署php项目教程汇总
nginx部署php项目教程汇总

本专题整合了nginx部署php项目教程汇总,阅读专题下面的文章了解更多详细内容。

122

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

497

2026.01.13

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

60

2026.10.16

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn