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

websoket

WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。你可以向服务器发送消息并接收事件驱动的响应,而无需通过轮询服务器的方式以获得响应,比较典型的应用场景就是即时通讯(聊天)系统。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>WebSocket 示例</title></head><body><script>// 实例化 socketconst ws = new WebSocket('wss://socketsbay.com/wss/v2/1/demo/')// 监听连接的建立ws.onopen = function (ev) {console.log('建立连接...')ws.send('Hello WebSockets!')}// 监听连接的断开ws.onclose = function (ev) {console.log('断开连接...')}// 监听 socket 服务器消息ws.onmessage = function (ev) {console.log('收到消息: ' + ev.data)}</script></body>
</html>

Socket.IO 是基于 WebSocket 进行的二次封装,封装了更多的业务层面的逻辑,如身份认证等、事件驱动等。

注:其实 Socket.IO 不仅仅是封装了 WebSocket,还有基于 Ajax 的长轮询机制,在不支持 WebSocket 的环境中会自动降级为基于 Ajax 的长轮询机制。

长轮询机制可以粗暴的理解为在一个定时器中不断的重复发 Ajax 请求,以实现与服务器实时通信的功能。

客户端代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>socket.io 示例</title>
</head><body><button id="myButton">点击</button><!-- <script src="node_modules/socket.io/client-dist/socket.io.js"></script> --><script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script><script>// 实例化const socket = io('http://localhost:3000', {transports: ['websocket'],})socket.on('connect', () => {console.log('建立连接...')})socket.on('disconnect', () => {console.log('断开连接...')})socket.on('sendToClient', (msg) => {console.log('收到来自服务器数据: ' + msg)})var myButton = document.getElementById('myButton');myButton.addEventListener('click', function () {socket.emit('sendToServer', '的花花世界是江苏省靖江市就是')});</script>
</body></html>

服务端代码

// server.js
import { createServer } from 'http'
import { Server } from 'socket.io'
import path from 'path'const server = createServer()
const io = new Server(server)// websocket
io.on('connection', (client) => {console.log('建立连接...')// 消息发送client.on('sendToServer', (msg) => {console.log('收到了客户端的数据: ' + msg)// 随机返回一条消息const messages = ['你好!', '我在写代码', '快下课了吧?']// 0 ~ 2 随机数据const index = Math.floor(Math.random() * 3)// 向客户端回复消息io.emit('sendToClient', messages[index])})// 断开连接client.on('disconnect', () => {console.log('断开连接...')})
})server.listen(3000, () => {console.log('server start')
})

相关文章:

websoket

WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。你可以向服务器发送消息并接收事件驱动的响应&#xff0c;而无需通过轮询服务器的方式以获得响应&#xff0c;比较典型的应用场景就是即时通讯&#xff08;聊天&#xff09;系统。 <!DOC…...

案例:微服务从Java/SpringBoot迁移到Golan

基于 Java 的微服务&#xff0c;特别是那些使用 Spring Boot 的微服务&#xff0c;长期以来因其强大的功能和广泛的社区支持而闻名。Spring Boot 的约定优于配置方法简化了微服务的部署和开发&#xff0c;提供了大量开箱即用的功能&#xff0c;例如自动配置、独立功能和简单的依…...

小波变换模拟

小波变换是一种信号处理技术&#xff0c;通过在时间-频率域中使用基于小波的函数进行信号分析。小波变换在处理非平稳信号和图像时特别有用&#xff0c;可以将信号分解为不同频率的成分。它在数据压缩、去噪、特征提取等领域有广泛应用。 MATLAB中提供了用于二维离散小波变换的…...

cv::Mat图像操作

图像读写 //include header #include <opencv2/imgcodecs.hpp>/** Currently, the following file formats are supported: Windows bitmaps - *.bmp, *.dib (always supported) JPEG files - *.jpeg, *.jpg, *.jpe (see the Note section) JPEG 2000 files - *.jp2 (s…...

【机器学习基础】一元线性回归(适合初学者的保姆级文章)

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;机器学习 欢迎订阅&#xff01;后面的内容会越来越有意思~ &#x1f4a1;往期推荐&#xff1a; 【机器学习基础】机器学习入门&#xff08;1&#xff09; 【机器学习基…...

2024年软件测试岗位-面试

第一部分&#xff1a; 1、自我介绍&#xff1a;简历写到的快速描述&#xff0c;学校、学历、工作经验等&#xff08;注意&#xff1a;不要过度优化简历&#xff0c;你不写别人可能会问&#xff0c;但你写了别人一定会问&#xff01;&#xff09; 第二部分&#xff1a; 1、功能测…...

【坑】Spring Boot整合MyBatis,一级缓存失效

一、Spring Boot整合MyBatis&#xff0c;一级缓存失效 1.1、概述 MyBatis一级缓存的作用域是同一个SqlSession&#xff0c;在同一个SqlSession中执行两次相同的查询&#xff0c;第一次执行完毕后&#xff0c;Mybatis会将查询到的数据缓存起来&#xff08;缓存到内存中&#xf…...

J7 - 对于ResNeXt-50算法的思考

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 J6周有一段代码如下 思考过程 首先看到这个问题的描述&#xff0c;想到的是可能使用了向量操作的广播机制然后就想想办法验证一下&…...

R3F(React Three Fiber)基础篇

之前一直在做ThreeJS方向&#xff0c;整理了两篇R3F&#xff08;React Three Fiber&#xff09;的文档&#xff0c;这是基础篇&#xff0c;如果您的业务场景需要使用R3F&#xff0c;您又对R3F不太了解&#xff0c;或者不想使用R3F全英文文档&#xff0c;您可以参考一下这篇&…...

torch\tensorflow在大语言模型LLM中的作用

文章目录 torch\tensorflow在大语言模型LLM中的作用 torch\tensorflow在大语言模型LLM中的作用 在大型语言模型&#xff08;LLM&#xff09;中&#xff0c;PyTorch和TensorFlow这两个深度学习框架起着至关重要的作用。它们为构建、训练和部署LLM提供了必要的工具和基础设施。 …...

设计模式-创建型模式-单例模式

0 引言 创建型模式&#xff08;Creational Pattern&#xff09;关注对象的创建过程&#xff0c;是一类最常用的设计模式&#xff0c;每个创建型模式都通过采用不同的解决方案来回答3个问题&#xff1a;创建什么&#xff08;What&#xff09;&#xff0c;由谁创建&#xff08;W…...

备战蓝桥杯—— 双指针技巧巧答链表1

对于单链表相关的问题&#xff0c;双指针技巧是一种非常广泛且有效的解决方法。以下是一些常见问题以及使用双指针技巧解决&#xff1a; 合并两个有序链表&#xff1a; 使用两个指针分别指向两个链表的头部&#xff0c;逐一比较节点的值&#xff0c;将较小的节点链接到结果链表…...

微信小程序返回上一级页面并自动刷新数据

文章目录 前言一、获取小程序栈二、生命周期触发总结 前言 界面由A到B&#xff0c;在由B返回A&#xff0c;触发刷新动作 一、获取小程序栈 界面A代码 shuaxin(){//此处可进行接口请求从而实现更新数据的效果console.log("刷新本页面数据啦")},界面B代码 // 返回触…...

Spring⼯⼚创建复杂对象

文章目录 5. Spring⼯⼚创建复杂对象5.1 什么是复杂对象5.2 Spring⼯⼚创建复杂对象的3种⽅式5.2.1 FactoryBean 接口5.2.2 实例⼯⼚5.2.3 静态工厂 5.3 Spring 工厂的总结 6. 控制Spring⼯⼚创建对象的次数6.1 如何控制简单对象的创建次数6.2 如何控制复杂对象的创建次数6.3 为…...

Top-N 泛型工具类

一、代码实现 通过封装 PriorityQueue 实现&#xff0c;PriorityQueue 本质上是完全二叉树实现的小根堆&#xff08;相对来说&#xff0c;如果比较器反向比较则是大根堆&#xff09;。 public class TopNUtil<E extends Comparable<E>> {private final PriorityQ…...

Java 后端面试指南

面试指南 TMD&#xff0c;一个后端为什么要了解那么多的知识&#xff0c;真是服了。啥啥都得了解 MySQL MySQL索引可能在以下几种情况下失效&#xff1a; 不遵循最左匹配原则&#xff1a;在联合索引中&#xff0c;如果没有使用索引的最左前缀&#xff0c;即查询条件中没有包含…...

142.环形链表 ||

给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整…...

Nacos、Eureka、Zookeeper注册中心的区别

Nacos、Eureka和Zookeeper都是常用的注册中心&#xff0c;它们在功能和实现方式上存在一些不同。 Nacos除了作为注册中心外&#xff0c;还提供了配置管理、服务发现和事件通知等功能。Nacos默认情况下采用AP架构保证服务可用性&#xff0c;CP架构底层采用Raft协议保证数据的一…...

CSS重点知识整理1

目录 1 平面位移 1.1 基本使用 1.2 单独方向的位移 1.3 使用平面位移实现绝对位置居中 2 平面旋转 2.1 基本使用 2.2 圆点转换 2.3 多重转换 3 平面缩放 3.1 基本使用 3.2 渐变的使用 4 空间转换 4.1 空间位移 4.1.1 基本使用 4.1.2 透视 4.2 空间旋转 4.3 立…...

【Langchain多Agent实践】一个有推销功能的旅游聊天机器人

【LangchainStreamlit】旅游聊天机器人_langchain streamlit-CSDN博客 视频讲解地址&#xff1a;【Langchain Agent】带推销功能的旅游聊天机器人_哔哩哔哩_bilibili 体验地址&#xff1a; http://101.33.225.241:8503/ github地址&#xff1a;GitHub - jerry1900/langcha…...

基于电子纸与ESP32的物联网桌面日历制作指南

1. 项目概述&#xff1a;打造一个永不掉电的桌面物联网日历如果你和我一样&#xff0c;喜欢在桌面上放点既实用又有科技感的小玩意儿&#xff0c;那么这个基于电子纸的物联网日历绝对能让你眼前一亮。它不像普通屏幕那样需要一直插着电&#xff0c;显示完日历后&#xff0c;你甚…...

矩阵Zig-Zag遍历:对角线路径的优雅实现

矩阵Zig-Zag遍历&#xff1a;对角线路径的优雅实现 最近刷题遇到一个很有意思的矩阵遍历问题&#xff1a;如何以Zig-Zag&#xff08;之字形&#xff09;的方式打印一个二维矩阵&#xff1f; 什么是Zig-Zag遍历&#xff1f; 简单来说&#xff0c;就是从矩阵的左上角开始&#…...

如何快速掌握BepInEx:从游戏玩家到插件开发者的完整指南

如何快速掌握BepInEx&#xff1a;从游戏玩家到插件开发者的完整指南 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx BepInEx是一款强大的Unity游戏插件框架&#xff0c;为游戏模组…...

ARMv8-M架构安全扩展与嵌入式系统配置详解

1. ARM_AEMv8M架构概述ARM_AEMv8M是ARMv8-M架构的扩展实现&#xff0c;专为嵌入式系统设计&#xff0c;提供了硬件级的安全隔离能力。这个架构引入了TrustZone安全扩展和MPU内存保护机制&#xff0c;使得开发者能够在资源受限的嵌入式设备上实现强大的安全功能。1.1 核心特性解…...

新手也能搞定!用Simulink搭建晶闸管直流调速系统(附完整模型文件)

从零构建晶闸管直流调速系统的Simulink实战指南 电力电子领域的研究生和工程师们常常需要快速掌握经典电路仿真技能。本文将手把手带你完成晶闸管直流调速系统的建模全过程&#xff0c;从模块选择到参数调试&#xff0c;每个环节都配有详细说明和实用技巧。不同于传统教材偏重理…...

MAX3421E USB主机控制器实战:为微控制器扩展USB外设连接能力

1. 项目概述&#xff1a;为你的微控制器打开USB主机世界的大门如果你玩过Arduino、ESP32或者树莓派Pico这类微控制器&#xff0c;肯定对它们的USB设备功能不陌生——插上电脑就能被识别成一个串口、一个键盘或者一个U盘。但你想过反过来吗&#xff1f;让你的微控制器项目变成“…...

钉钉数字化转型避坑指南:这10个“雷区”90%企业都踩过

钉钉数字化转型避坑指南&#xff1a;这10个“雷区”90%企业都踩过在数字经济浪潮下&#xff0c;企业数字化转型已从“可选项”变为“生存必修课”。而钉钉作为国内领先的企业数字化平台&#xff0c;凭借其开放生态、低代码能力和丰富应用&#xff0c;成为众多企业转型的首选基座…...

Hello Robot 发布 Stretch 4 移动操作机器人,推动具身智能迈向家庭实用化

近日&#xff0c;机器人公司 Hello Robot 正式推出了其新一代产品——Stretch 4 移动操作机器人。作为 Stretch 3 的全面升级迭代&#xff0c;全新的 Hello Robot 具身智能平台​ 在移动灵活性、环境感知、运行性能与续航能力上实现了显著突破&#xff0c;并将设计重心明确转向…...

从“白点”到模型:用通俗语言拆解玻纤布(如1078)在SI仿真中的正确建模姿势

从“白点”到模型&#xff1a;信号完整性仿真中的玻纤布建模实战指南 在高速PCB设计领域&#xff0c;信号完整性&#xff08;SI&#xff09;工程师常常需要面对一个看似微小却影响深远的问题&#xff1a;那些在显微镜下呈现为"白点"的玻璃纤维束&#xff0c;究竟应该…...

别再傻傻分不清了!一张图看懂CRT、PEM、PFX、P7B证书格式的区别与应用场景

数字证书格式全解析&#xff1a;CRT、PEM、PFX、P7B的核心差异与实战选择 当你第一次在服务器上配置SSL证书时&#xff0c;面对CRT、PEM、PFX、P7B这些后缀名&#xff0c;是不是感觉像在解密码&#xff1f;上周我帮一个创业团队迁移服务器&#xff0c;他们的CTO拿着五个不同格式…...