如何在公司项目中使用 WebSocket— 入门实战指南
本文从 WebSocket 基础概念出发,介绍在实际开发中从本地联调到部署上线的流程以及注意事项,让 WebSocket 小白以最小成本应用到项目中。
一、WebSocket 基础
1、什么是 WebSocket
2、对比 http
- 两者都位于应用层,都依赖TCP协议
- WebSocket 协议一般以ws://或wss://开头
- HTTP 不支持全双工通信,一般使用轮询方式
3、WebSocket 基础用法
兼容性:
https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
一个简单的 Demo
(视频详见原文)
客户端可以在控制台 -network-ws下看到 WebSocket 消息
注意请求头里的几个关键字段
- 请求地址为 ws:// 或 wss:// 开头
- Connection 必须设置 Upgrade,表示客户端希望连接升级
- Upgrade字段必须设置 WebSocket,表示希望升级到 WebSocket 协议。
- 如果服务端支持 websocket,会在响应头中返回相同的信息,并且连接状态置为101(协议切换成功
二、如何在项目中使用 WebSocke
下面以一个实际项目为例,展示如何实现一个WebSocket接口,包含开发->联调->部署→上线整个流程。
1、开发环境
将上面的 Demo简单封装一下,在项目中调用如下:
配置 webpack 代理
说明:
- WebSocket接口要和http接口分开
- 域名使用location.host并且通过反向代理转发,目的是保留cookie和头信息。
2、心跳检测&断线重连
为了保证连接稳定,需要考虑一些异常情况,如网络波动导致连接中断,服务器超时等。
心跳检测即客户端定时向服务端发送心跳消息,保持连接稳定;
断线重连即发送消息前,检测连接状态,若连接中断,尝试n次连接;
封装如下:
也可选择第三方库处理。
3、Nginx配置
The WebSocket protocol is different from the HTTP protocol, but the WebSocket handshake is compatible with HTTP, using the HTTP Upgrade facility to upgrade the connection from HTTP to WebSocket.
This allows WebSocket applications to more easily fit into existing infrastructures.
For example, WebSocket applications can use the standard HTTP ports 80 and 443, thus allowing the use of existing firewall rules.
三、其他
sockiet.io
sockiet.io 是基于 Node 的实时应用程序框架,对比原生 WebSocket,封装了更多通用能力,且在不支持WebSocket的浏览器上,可以降级为轮询方式通信。
优点:成熟,开箱即用,兼容性好。
缺点:体积较大,前后端必须统一,即后端使用 socket.io 则前端必须使用 socket.io-client 对应。
作者:vivo 商业化大前端团队
相关文章
- 机器学习中的新数学,加速AI训练离不开数字表示方式和基本计算的变革
- 卷!用扩散模型合成连贯视觉故事,输入字幕就能脑补画面,代词ta都分得清
- 马斯克公开宣战:拒绝30%苹果税,不怕推特被下架
- 「穿越」成真?科学家造出史上首个「虫洞」,登Nature封面
- 面试被问Redis和zk两种分布式锁的对比
- 460道Java后端面试高频题答案版【模块三:Java并发】
- 在re:Invent 2022大会上,我们看到了云计算的未来
- 7 Papers & Radios | Hinton前向-前向神经网络训练算法;科学家造出「虫洞」登Nature封面
- Stable Diffusion的魅力:苹果亲自下场优化,iPad、Mac上快速出图
- 功能大幅缩水,苹果的自动驾驶产品,要2026年才能看到了
- 人体试验要泡汤?马斯克Neuralink面临联邦调查,实验动物死亡频发
- 星脉高性能计算网络:为AI大模型构筑网络底座
- 【已解决】在docker里面安装es时候提示IPv4 forwarding is disabled. Networking will not work.
- Vue DevUI v1.4 版本发布:从体验、效率、质量三个方面做了全方位的优化🎉
- 使用Angular构建单页面应用(SPA)
- 如何在 pyqt 中实现桌面歌词
- 对 python 中 @property 和计算属性的一些思考
- 如何使用 numpy 和 pytorch 快速计算 IOU
- 实践案例丨基于ModelArts AI市场算法MobileNet_v2实现花卉分类
- 美女面试官问我Python如何优雅的创建临时文件,我的回答....