当前位置: 首页 > news >正文

websocket学习

1.什么是websocket

1)首先websocket和http一样,是一种网络通信协议,来自HTML5的特性;

2)他可以使客户端和服务端进行双工通信,简单来说,就是双向通信:比如我们熟悉的http协议,由客户端发起请求,通过三次握手,与服务端建立联系,并发送数据,获得相应,这是单向的,而websocket实现了服务端向客户端主动发送数据。

3)只要不主动切断联系,服务端的数据就可以一直向客户端输送,场景如:智慧交通交通系统,例如有车闯红灯了,服务端就会发送数据,在客户端发出报警信息,还有一些智慧工厂,最简单的还是我们的聊天系统,对方发送的消息可以不通过你的发起就能发送给你,这样的例子还很多。

PS:详细的学习内容自行百度推荐一个

WebSocket - Web API 接口参考 | MDN

2.使用

碰到的机会不是很多,我遇到的所有场景都是和报警或者网站告警有关系,下面就使用原生的实现:

// 首先判断浏览器是否支持
if ('Websocket' in window) {const ws = new Websocket(url);// 连接建立好之后的回调ws.onopen = (event) => {console.log("WebSocket is open now.");// 传送一些后台需要的数据(string类型或者二进制文件图片等数据)ws.send('') };// 后台返回的数据ws.on('message', (event) => {const res = JSON.parse(event.data);console.log(res);})// 关闭连接ws.close();
} else {// 浏览器不支持
}

上面代码的注释就是执行步骤,有几个点特别说一下:

1)open和message事件专门用两种写法写的,都是可行的,open是建立连接的回调,一般都在这发送信息给后台,message是后台传数据回来的方法,这写是和后台约定好的,一般都是这样;

2)最后记得关闭close(),websocket中方法直接执行的有两个,一个是send一个就是close;

3)传参过去基本都是字符串,message返回参数event.data;

3.实际开发中遇到的一些问题

首先,问题是我自己对websocket特性的不熟悉导致的,因为项目使用nginx代理,而之前调用websocket的时候都是直接写的链接,所以在想能不能代理,结果却是看到了这句话:

webSocket 没有同源限制,客户端可以与任意服务器通信

这句意味着根本不需要考虑跨域的问题,直接填写url全部就好;

然后还有一个在本地调用的时候ws://开头可以使用,而上了生产环境就不行了,这个请教了后台同事,这个就是和你的本身浏览器地址有关,需要动态更改,基础的就是这样,先写这些。

PS:websocket还有很多方法和几个常用库,都比较实用,可以试一试。

相关文章:

websocket学习

1.什么是websocket 1)首先websocket和http一样,是一种网络通信协议,来自HTML5的特性; 2)他可以使客户端和服务端进行双工通信,简单来说,就是双向通信:比如我们熟悉的http协议&…...

Java面试题及答案整理汇总(2023最新版)

前言 面试前还是很有必要针对性的刷一些题,很多朋友的实战能力很强,但是理论比较薄弱,面试前不做准备是很吃亏的。这里整理了很多面试常考的一些面试题,希望能帮助到你面试前的复习并且找到一个好的工作,也节省你在网…...

公司来了个卷王,我愿称之为王中王,让人崩溃

前几天我们公司一下子也来了几个新人,这些年前人是真能熬啊,本来我们几个老油子都是每天稍微加会班就打算走了,这几个新人一直不走,搞得我们也不好走。2023年春招就要开始了,最近内卷严重,各种跳槽裁员&…...

波奇学c语言:代码的编译和链接

test.c(源文件)->编译->test.obj(目标文件)->链接->test.exe(可执行文件)编译1.预编译(预处理):text.c->text.i使用gcc -E test.c 进行停止预处理指令&am…...

计算机网络原理--传输层协议(TCP协议十大特性)

目录 1.认识TCP协议 TCP的协议段格式 2. 确认应答机制 3.超时重传 4.连接管理 <...

nvm控制node版本

安装 nvm 1、下载 nvm 官网安装包&#xff1a; github 选择 nvm-setup.exe 下载 2、安装 1、选择 nvm 安装目录&#xff08;可自定义&#xff09; 2、选择 node 安装目录&#xff08;如有安装过&#xff0c;可以选择以前安装目录&#xff0c;可 cdm 输入 where node 查看原nod…...

从0到1一步一步玩转openEuler--13 openEuler用户组管理

文章目录13.1 创建用户组13.1.1 groupadd命令13.1.2 用户组信息文件13.1.3 创建用户组实例13.2 修改用户组13.2.1 修改GID13.2.2 修改用户组名13.3 删除用户组13.4 将用户加入用户组或从用户组中移除13.5 切换用户组在Linux中&#xff0c;每个普通用户都有一个账户&#xff0c;…...

知不知道什么叫米筐量化?怎么来的?

现在量化市场范围越来越大&#xff0c;各种量化系统也是普遍性的了&#xff0c;不过米匡量化这个开发系统通常是由交易接口的专业开发团队开发的的结果&#xff0c;那么米匡量化的终端又是是怎么开发成功的呢&#xff1f;首先&#xff0c;我们可以从api接口的调用来了解&#x…...

Urho3D 事件Events

在脚本中&#xff0c;子系统通过以下全局财产可用&#xff1a;时间、文件系统、日志、缓存、网络、输入、ui、音频、引擎、图形、渲染器、脚本、控制台、debugHud、数据库。请注意&#xff0c;由于WorkQueue和Profiler的低级性质&#xff0c;它们不可用于脚本。 事件本身不需要…...

Rust学习入门--【8】复合类型

复合类型&#xff08;compound type&#xff09; 可以将多个不同类型的值组合为一个类型。 Rust中提供了两种内置的复合数据类型&#xff1a;元组&#xff08;tuple&#xff09;和数组&#xff08;array&#xff09;。 元组类型 元组是一个具有 固定长度 的数据集合 —— 无…...

【整理六】

1、props和state相同点和不同点&#xff1f;render方法在哪些情况下会执行&#xff1f; props是一个从外部传进组件的参数&#xff0c;由于React具有单向数据流的特性&#xff0c;所以他的主要作用是从父组件向子组件中传递数据&#xff0c;它是不可改变的&#xff0c;如果想要…...

Ubuntu20.04安装MySQL5.7与远程连接

一、安装MySQL5.7 1.更换镜像源 sudo cp /etc/apt/sources.list /etc/apt/sources.list.old #备份原来的文件 sudo vim /etc/apt/sources.list #修改sources.list文件配置文件内容如下所示&#xff1a; # 清华镜像源 deb https://mirrors.tuna.tsinghua.edu.cn/ubu…...

【yolov5】首次尝试目标检测利用prompt(完整操作流程)

1、打开prompt 2、切换到pytorch所在环境 conda activate freezing我的环境名是freezing&#xff0c;这里根据自己环境名去激活切换 3、进入到yolov5项目所在路径 激活完环境后立即执行指令当然是无效的&#xff0c;首先要进入到你的项目目录 首先看一下自己的项目在那个位…...

三大指标继续狂飙!重庆啤酒:不惧强弱分化加剧,深耕高端市场

十多年前&#xff0c;重庆啤酒因为9个跌停而被一片唱衰&#xff0c;资本市场经典的“关灯吃面”典故自此出现&#xff0c;被股民沿用至今。不过自2020年&#xff0c;重庆啤酒开始逆转走势&#xff0c;股价连续上涨。2021年重庆啤酒营收突破百亿大关&#xff0c;净赚11.66亿元&a…...

MySQL数据库14——更新和删除数据

SQL里面使用UPDATE更新数据&#xff0c;删除使用DELETE语句。 Mysql要修改一下设置&#xff0c;才能更新&#xff1a; 在左上角菜单栏里面选择偏好栏&#xff0c;取消下面这个红框的勾选 更新单个字段的数据 如果运行环境为MySQL 则使用以下语句进行备份。 CREATE TABLE stu…...

Java面试——MyBatis篇

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

C++的 new 和 delete

文章目录一、new 和 delete 的使用二、operator new 和 operator delete 函数三、new 和 delete 的实现原理四、申请空间和释放空间应配套使用五、定位 new 表达式六、malloc/free 和 new/delete 的区别C语言的动态内存管理函数(malloc、calloc、realloc、free) 虽然可以继续在…...

MySQL 事务原理

文章目录1、事务1.1、ACID 特性1.1.1、原子性undo log1.1.2、一致性1.1.3、* 隔离性1.1.4、持久性redo log1.2、事务控制语句2、隔离级别2.1、隔离级别的分类2.1.1、读未提交 RU2.1.2、读已提交 RC2.1.3、可重复读 RR2.1.4、串行化 SC2.2、并发事务读异常2.2.1、* 脏读2.2.2、*…...

软件测试面试自我介绍/项目介绍居然还有模板?我要是早点发现就好了

目录 1、自我介绍 2、项目介绍 2.1、最全电商项目介绍 2.2、电商项目介绍 2.3、在线教育项目介绍 2.4、互联网金融项目介绍 总结 1、自我介绍 以XXX简历来举例&#xff08;参照下面的案例&#xff0c;编写你的自我介绍&#xff0c;框架就是&#xff1a;我是谁&#xff0…...

new RegExp的使用

1.RegExp是什么 当检索某个文本时&#xff0c;可以使用一种模式来描述要检索的内容。RegExp 就是这种模式 RegExp 对象用于存储检索模式。 var patt1new RegExp("e");当使用该 RegExp 对象在一个字符串中检索时&#xff0c;将寻找的是字符 “e” g &#xff1a;表…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

《Offer来了:Java面试核心知识点精讲》大纲

文章目录 一、《Offer来了:Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了:Java面试核心知识点精讲(原理篇)》技术文章大纲核心主题:Java基础原理与面试高频考点Java虚拟机(JVM)原理Java并发编程原理Jav…...