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

websocket 前端项目js示例

websocket前端 和服务端websocket通信示例, 前端直接使用h5的内置对象 WebSocket 来创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据。

这个对象都是是事件方式来处理和与后端交互数据, 他们分别是 onopen打开, onclose关闭, onerror 异常 和  onmessage 收到消息这4个事件来处理。 其中我们的主要业务逻辑和数据的接收都是在onmessage里面完成的。 

websocket.js文件


// 根据不同的http环境构建对应的协议 ws 或者 wss
const getWsUri = () => {var loc = window.location,ws_prot = "ws:";if (loc.protocol === "https:") {ws_prot = "wss:";}return ws_prot + "//" + loc.host + loc.pathname + "ws"
}var timeout = 250;const clamp = (val, min, max) => {if (val < min) return min;if (val > max) return max;return val;
}/* WebSocket 链接处理 */
const connect = () => {const uri = getWsUri();// 创建一个和服务端的WS链接对象let ws = new WebSocket(uri);console.info(`Attempting websocket connection to server at ${uri}`);// 链接打开时的处理方法ws.onopen = () => {console.info("Successfully connected");timeout = 250; // reset connection timeout for next time};// 链接关闭时的处理方法ws.onclose = event => {console.error(`Closed websocket connection: code ${event.code}`);setTimeout(connect, clamp(timeout += timeout, 250, 5000));};ws.onerror = err => {console.error(`Websocket error, closing connection.`);ws.close();};// onmessage这个是当ws收到数据时调用的方法ws.onmessage = event => {// 接收并返序列化JSON数据let data = JSON.parse(event.data)// 你的业务逻辑}
}
// 执行ws函数
connect();

其实前端的这websocket挺简单的, 只要你搞明白了上面的4个事件就OK, 更多的使用细节可参考MSDN官方文档 https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

Websocket后端部分可参考: https://blog.csdn.net/tekin_cn/article/details/139534427

相关文章:

websocket 前端项目js示例

websocket前端 和服务端websocket通信示例&#xff0c; 前端直接使用h5的内置对象 WebSocket 来创建和管理 WebSocket 连接&#xff0c;以及可以通过该连接发送和接收数据。 这个对象都是是事件方式来处理和与后端交互数据&#xff0c; 他们分别是 onopen打开, onclose关闭, o…...

webapi跨越问题

由于浏览器存在同源策略&#xff0c;为了防止 钓鱼问题&#xff0c;浏览器直接请求才不会有跨越的问题 浏览器要求JavaScript或Cookie只能访问同域下的内容 浏览器也是一个应用程序&#xff0c;有很多限制&#xff0c;不能访问和使用电脑信息&#xff08;获取cpu、硬盘等&#…...

你知道 npmrc 文档吗? ---- npmrc 关键作用介绍

你知道 npmrc 文档吗&#xff1f; ---- npmrc 关键作用介绍 你知道 npmrc 文档吗&#xff1f; ---- npmrc 关键作用介绍如何修改配置呢&#xff1f;日常开放常常需要置哪些信息呢&#xff1f;registry 信息配置限定包认证信息代理配置缓存配置安装行为 参考 你知道 npmrc 文档吗…...

发现 Laravel 中的 api 响应时间明显过长

背景 近期在排查网站后台页面功能时 发现&#xff0c;部分查询页面&#xff0c;明显响应时间过长&#xff08;12秒&#xff09;&#xff0c;不合理 优先排查 接口运行时长 经过打印&#xff0c;发现代码是正常的&#xff0c;且时间仅需不到一秒 进一步怀疑是 VUE框架的渲染加载…...

如何在MySQL中创建不同的索引和用途?

目录 1 基本的 CREATE INDEX 语法 2 创建单列索引 3 创建多列索引 4 创建唯一索引 5 创建全文索引 6 在表创建时添加索引 7 使用 ALTER TABLE 添加索引 8 删除索引 9 索引管理的最佳实践 10 示例 在 MySQL 中&#xff0c;索引&#xff08;index&#xff09;是一种用于…...

maxwell同步mysql到kafka(一个服务器启动多个)

创建mysql同步用户 CREATE USER maxwell% IDENTIFIED BY 123456; GRANT ALL ON maxwell.* TO maxwell%; GRANT SELECT, REPLICATION CLIENT, REPLICATION SLAVE on *.* to maxwell%; 开启mysql binlog a.修改 /etc/my.cnf 配置 log-binmysql-bin # 开启binlog binlog-forma…...

实用软件分享---简单菜谱 0.3版本 几千种美食(安卓)

专栏介绍:本专栏主要分享一些实用的软件(Po Jie版); 声明1:软件不保证时效性;只能保证在写本文时,该软件是可用的;不保证后续时间该软件能一直正常运行;不保证没有bug;如果软件不可用了,我知道后会第一时间在题目上注明(已失效)。介意者请勿订阅。 声明2:本专栏的…...

网络学习(14)|RESTful API设计:构建优雅的Web服务

文章目录 设计原则最佳实践命名与URI设计状态码与响应格式HTTP状态码详解响应格式选择 在当今的互联网世界中&#xff0c;RESTful API已成为构建可扩展、可维护和高性能Web服务的标准。本文将深入探讨RESTful API的设计原则、资源命名与URI设计的最佳实践&#xff0c;以及请求与…...

【开源】APIJSON 框架

简述 APIJSON是一个关于API和JSON的综合技术或框架&#xff0c;一种专为API设计的JSON网络传输协议&#xff0c;以及基于这套协议实现的ORM库。 1. 定义与特点&#xff1a; APIJSON是一种基于接口的JSON传输结构协议&#xff0c;它允许客户端定义任何JSON结构来向服务端发起…...

R语言探索与分析18-基于时间序列的汇率预测

一、研究背景与意义 汇率是指两个国家之间的货币兑换比率&#xff0c;而且在国家与国家的经济交流有着举足轻重的作用。随着经济全球化的不断深入&#xff0c;在整个全球经济体中&#xff0c;汇率还是一个评估国家与国家之间的经济状况和发展水平的一个风向标。汇率的变动会对…...

30岁迷茫?AI赛道,人生新起点

前言 30岁&#xff0c;对于许多人来说&#xff0c;是一个人生的分水岭。在这个年纪&#xff0c;有些人可能已经在某个领域取得了不小的成就&#xff0c;而有些人则可能开始对未来的职业方向感到迷茫。如果你正处于这个阶段&#xff0c;那么你可能会问自己&#xff1a;30岁转行…...

开门预警系统技术规范(简化版)

开门预警系统技术规范(简化版) 1 系统概述2 预警区域3 预警目标4 功能需求5 功能条件6 显示需求7 指标需求1 系统概述 开门预警系统(DOW),在自车停止开门过程中,安装在车辆的传感器(如安装在车辆后保险杆两个角雷达)检测从自车后方接近的目标车(汽车、摩托车等)的相对…...

Django与MySQL:配置数据库的详细步骤

文章目录 Django-MySQL 配置配置完执行数据迁移&#xff0c;如果报错: Error loading MySQLdb module&#xff0c; Django-MySQL 配置 # settings.pyDATABASES {# 默认配置sqlite3数据库# default: {# ENGINE: django.db.backends.sqlite3,# NAME: BASE_DIR / db.sqli…...

GPT-4o short description

GPT-4o&#xff0c;作为OpenAI最新推出的人工智能模型&#xff0c;无疑在人工智能领域掀起了新的波澜。 一、版本间的对比分析 与前一版本GPT-4相比&#xff0c;GPT-4o在多个方面进行了显著的改进和优化。首先&#xff0c;在参数规模上&#xff0c;GPT-4o达到了2000亿个参数&…...

MATLAB 矩阵

创建矩阵直接输入&#xff1a;使用 zeros, ones, eye 函数&#xff1a;使用 rand, randi 函数&#xff1a;使用 diag 函数&#xff1a; 矩阵操作矩阵加法和减法&#xff1a;矩阵乘法&#xff1a;矩阵转置&#xff1a;矩阵求逆&#xff1a;矩阵分解&#xff1a;矩阵大小&#xf…...

LED灯的功率以及好的品牌推荐

LED灯的功率选择主要根据使用场景、照明需求以及灯具类型来决定。常见的LED灯功率范围在0.5W到100W之间&#xff0c;不同的功率范围适用于不同的场景。 对于小型照明设备&#xff0c;如小夜灯或手电筒&#xff0c;通常选择0.5W到3W的LED灯&#xff0c;足以满足基本的照明需求。…...

Linux “ 软件管理 “

软件管理 widows 安装 方法一&#xff1a; 双击exe安装包&#xff0c;就可以安装。 用exe安装的软件会破记录到注册表中。 注册会记录安装位置&#xff0c;软件名称。 方法二&#xff1a; 用绿色方式进行安装。 不用写到注册表中&#xff0c;因此无法在开始菜单里面查看和卸…...

【uni-app】申请高德地图key,封装map.js,实现H5、iOS、Android通过getlocation获取地图定位信息

文章目录 map组件基础使用封装map.js&#xff0c;实现定位1、使用第三方地图&#xff1a;高德&#xff0c;申请对应平台key1、申请H5 key2、申请微信小程序 key3、申请android key查看证书详情&#xff0c;可以看到SHA1查看/设置Android包名 4、申请ios key 2、封装map1、lib/m…...

使用rufus做Kali Linux时持久分区大小如何设置

持久分区大小是什么意思&#xff1a; 持久分区大小指的是在U盘安装引导Kali Linux时&#xff0c;为保存Kali修改后的设置&#xff08;如中文界面显示等&#xff09;而预留的空间大小。这个空间相当于电脑中的D盘&#xff0c;用于保存修改后的设置。 而剩下的空间则用于安装Kali…...

Java高阶数据结构-----并查集(详解)

目录 &#x1f9d0;一.并查集的基本概念&实例&#xff1a; &#x1f92a;二.并查集代码&#xff1a; &#x1f602;三&#xff1a;并查集的一些习题&#xff1a; A.省份数量 B.等式方程的可满足性 &#x1f9d0;一.并查集的基本概念&实例&#xff1a; 并查集概念&…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

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

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

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...