#浅聊 webSocket (干货)
创始人
2025-06-01 04:09:46
如果可以实现记得点赞分享，谢谢老铁～
一，什么是websocket
WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）
它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的
Websocket是一个持久化的协议
二，websocket的原理
websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信
在websocket出现之前，web交互一般是基于http协议的短连接或者长连接
websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"
三，上代码
1.你需要创建一个工具类。webSocket.js
let apiUrl;if (location.host.toLowerCase().indexOf('localhost') !== -1) {apiUrl = 'ws://192.168.xx.xxx:8000/ws/;} else {apiUrl = `ws://${location.host.toLowerCase()}/ws/tuisong`;}const webSocketSetting = {url: apiUrl, // 测试
};export default webSocketSetting;
2.在你的业务代码里面开始导入
import webSocketSetting from '@/services/webSocket';// 推送
const connectWebStocket = () => {const token: any = localStorage.getItem('token');if (token) {ws = new WebSocket(`${webSocketSetting.url}?token=${token}`);ws.onopen = function (evt) {console.log('Connection success ...');};ws.onmessage = function (evt) {const data = JSON.parse(evt.data);if (data) {//todo } else {message.destroy();message.error(data?.message);}};ws.onclose = function (evt) {console.log('Connection closed.');};}
};
3.最后在你的启动生命周期挂载就好了，记得关闭websoket
useEffect(() => {connectWebStocket();if (ws) {return () => ws.close();}
},[]);
相关内容
热门资讯
元凌卿是什么小说,前世辜负了痴...
元凌卿是什么小说目录《醉玲珑》大结局是什么？前世辜负了痴情的七王爷,重生后她不再任性叫什么名字女主叫...
忘年之交指怎样的朋友,忘年之交...
忘年之交指怎样的朋友目录忘年之交指怎样的朋友忘年之交指的是什么样的朋友？
披头士为什么叫甲壳虫（披头士和...
今天给各位分享披头士为什么叫甲壳虫的知识，其中也会对披头士和甲壳虫的区别进行解释，如果能碰巧解决你现...
白灵结局是什么,活佛济公里的白...
白灵结局是什么目录白灵结局是什么活佛济公里的白灵是个什么结局？活佛济公4白灵的结局白灵结局是什么呢?...
择天记电视剧结局,择天记结局 ...
择天记电视剧结局目录择天记电视剧结局择天记结局 大结局请查收电视剧《择天记》大结局是什么？落落结局为...
三星手机怎么录制屏幕视频,三星...
2. 在通知面板中，找到并点击
保险的基本知识有哪些,关于买保...
保险的基本知识有哪些目录保险的基本知识有哪些关于买保险的基本知识买保险，需要知道的基本知识保险的基础...
每次消防出警需要收费的吗,消防...
每次消防出警需要收费的吗目录每次消防出警需要收费的吗消防队出警灭火，需要交钱么？消防员出警要收费吗消...
14K金项链会掉色吗,k14项...
14K金项链会掉色吗目录14K金项链会掉色吗k14项链掉色正常吗？14K金子掉色吗？14k金会掉色吗...
如何正确的使用加湿器,加湿器怎...
如何正确的使用加湿器目录如何正确的使用加湿器加湿器怎么使用正确加湿器使用注意事项加湿器的正确使用方法...
正规的网贷平台有哪些,不查征信...
正规的网贷平台有哪些目录正规的网贷平台有哪些不查征信的靠谱网贷平台有哪些正规的借贷平台有哪些？有哪些...
广东省普宁市属于哪个市,普宁是...
广东省普宁市属于哪个市目录广东省普宁市属于哪个市普宁是哪个是市的普宁属于哪个省哪个城市的？普宁市是哪...
雷洛科雷傲精彩改装案例（雷诺科...
今天给各位分享雷洛科雷傲精彩改装案例的知识，其中也会对雷诺科雷傲爆改进行解释，如果能碰巧解决你现在面...
国人难以忘却的经典解读丰田8A...
今天给各位分享国人难以忘却的经典解读丰田8A发动机的知识，其中也会对丰田8a发动机图片进行解释，如果...
2023张家口到北京的火车时刻...
今天给各位分享2023张家口到北京的火车时刻表查询,从张家口到北京...的知识，其中也会对张家口到北...
小狼狗是什么意思（小狼狗是啥）...
今天给各位分享小狼狗是什么意思的知识，其中也会对小狼狗是啥进行解释，如果能碰巧解决你现在面临的问题，...
苹果手机换购新款需要什么条件吗...
苹果最近的政策以旧换新需要办理什么手续,要身份证什么的吗?办过的才回答苹果旧机换新机的条件是什么？ ...
ps怎么抠图详细步骤,ps最简...
ps怎么抠图详细步骤目录ps怎么抠图详细步骤ps最简单的抠图方法的具体操作步骤怎么做？在线ps教程 ...
赴汤蹈火在所不辞的意思,赴汤蹈...
赴汤蹈火在所不辞的意思目录赴汤蹈火在所不辞的意思赴汤蹈火，再所不辞.赴汤蹈火的意思赴汤蹈火,在所不辞...
邮政报刊厅怎么申请 极速百科网...
邮政报刊厅怎么申请目录邮政报刊厅怎么申请邮政报刊厅怎么申请想开邮政报亭怎样办理!需要什么手续?邮政报...
新宝来和新朗逸选谁更好?网友:...
今天给各位分享新宝来和新朗逸选谁更好?网友:毫无悬念,朗逸全方位...的知识，其中也会对大众新宝来和...
pms系统是什么意思 极速百科...
pms系统是什么意思目录pms系统是什么意思pms系统是什么意思mis系统是什么pms什么意思pms...
无影灯原理（无影灯原理图讲解）...
今天给各位分享无影灯原理的知识，其中也会对无影灯原理图讲解进行解释，如果能碰巧解决你现在面临的问题，...
蜂蜜的用途（蜂蜜的用途是什么）...
本篇文章极速百科给大家谈谈蜂蜜的用途，以及蜂蜜的用途是什么对应的知识点，希望对各位有所帮助，不要忘了...
16K纸有多大比A4的大还是小...
今天给各位分享16K纸有多大比A4的大还是小的知识，其中也会对16k的纸是a4纸的一半吗进行解释，如...
许昌新车上牌地址（许昌新车上牌...
今天给各位分享许昌新车上牌地址的知识，其中也会对许昌新车上牌地址查询进行解释，如果能碰巧解决你现在面...
八大艺术有哪些,艺术的八大类分...
八大艺术有哪些目录八大艺术有哪些艺术的八大类分别是什么世界公认的七大艺术是什么？什么被称八大艺术八大...
离我最近的北京现代4s店（离我...
本篇文章极速百科给大家谈谈离我最近的北京现代4s店，以及离我最近的北京现代4s店保养车对应的知识点，...
导轨油和机油的区别?（导轨油和...
今天给各位分享导轨油和机油的区别?的知识，其中也会对导轨油和机油的区别是什么进行解释，如果能碰巧解决...
免检卡板有什么好的,与熏蒸卡板...
本篇文章极速百科给大家谈谈免检卡板有什么好的,与熏蒸卡板有什么区别呢?，以及免检卡板图片对应的知识点...