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

javascript WebSocket是什么_如何实现浏览器与服务器的双向通信?

风涛吖_3386

风涛吖_3386

发布时间:2025-12-22 18:19:30

|

876人浏览过

|

来源于php中文网

原创

WebSocket是浏览器与服务器间持久化、全双工通信协议,解决HTTP轮询效率低问题;前端用new WebSocket()创建连接,后端需支持协议升级;使用时需处理重连、认证、消息分包及强制加密。

javascript websocket是什么_如何实现浏览器与服务器的双向通信?

WebSocket 是浏览器与服务器之间建立持久化、全双工通信通道的协议。它不像 HTTP 那样每次请求都要重新握手,而是一次连接后双方可以随时互相发消息,适合聊天、实时通知、协作编辑、行情推送等场景。

为什么需要 WebSocket?

HTTP 是“请求-响应”模式:浏览器发请求,服务器回一次数据,连接就断了。想实时获取新消息,只能靠轮询(反复发请求)或长轮询(卡住响应等数据),效率低、开销大、延迟高。WebSocket 解决了这个问题——连接建立后,服务端有数据就能立刻推给浏览器,反之亦然。

如何在浏览器中创建 WebSocket 连接?

前端用 new WebSocket(url) 即可发起连接,URL 以 ws://(非加密)或 wss://(加密,推荐)开头:

  • 连接成功后触发 onopen 回调
  • 收到消息时触发 onmessage,事件对象的 data 就是服务器发来的数据
  • 调用 send() 方法可向服务端发消息(支持字符串、Blob、ArrayBuffer)
  • 出错或断开时会触发 onerror 或 onclose

示例:

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

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

const ws = new WebSocket('wss://example.com/chat');
ws.onopen = () => { ws.send('Hello server!'); };
ws.onmessage = (event) => { console.log('收到:', event.data); };
ws.onclose = () => { console.log('连接已关闭'); };

后端如何支持 WebSocket?(以 Node.js + ws 库为例)

浏览器只是客户端,服务端也得支持 WebSocket 协议才能响应升级请求:

  • 用 ws 库监听 HTTP 服务器的 upgrade 事件,把连接升级为 WebSocket
  • 每个连接对应一个 WebSocket 实例,通过 send() 向该客户端发消息
  • 用 on('message') 接收客户端消息;用 on('close') 或 on('error') 处理异常
  • 若需广播消息给所有在线用户,需自行维护连接列表(如用 Map 存 socket 实例)

简单服务端示意:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
  ws.send('欢迎加入');
  ws.on('message', (data) => {
    console.log('收到:', data.toString());
    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`广播: ${data}`);
      }
    }
  });
  ws.on('close', () => console.log('用户离开'));
});

使用时要注意什么?

  • 连接可能因网络、服务重启等原因断开,前端应监听 onclose 并实现自动重连(带退避策略更稳妥)
  • WebSocket 不支持跨域 Cookie,登录态通常靠 token 放在 URL 或首次 send 中传递
  • 消息无内置分包/粘包机制,大数据建议自己加协议头(如 JSON + length 字段)或用 MessagePack 等序列化
  • 生产环境务必用 wss://,否则现代浏览器会拦截混合内容

基本上就这些。WebSocket 本身协议简单,关键在于连接管理、错误恢复和业务消息设计。

热门AI工具

更多
豆包大模型

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

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

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

DeepSeek

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

二狗PPT
二狗PPT Hot

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

切问学术

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

蛙蛙写作

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

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

相关专题

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

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

2195

2023.08.07

json是什么
json是什么

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

3482

2023.08.23

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

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

1176

2023.10.13

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

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

3999

2025.09.10

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

798

2025.12.04

require的用法
require的用法

require的用法有引入模块、导入类或方法、执行特定任务。想了解更多require的相关内容,可以阅读本专题下面的文章。

1975

2023.11.27

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

12279

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1226

2023.11.23

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

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