关于项目中websocket的socket.io客户端js库的应用

1.如何使用客户端js库?

pnpm add socket.io-client

2.如何建立连接?

import io from 'socket.io-client'
// 参数1:不传默认是当前服务域名,开发中传入服务器地址
// 参数2:配置参数,根据需要再来介绍
const socket = io()

3.如何确定连接成功?

socket.on('connect', () => {// 建立连接成功
})

4.如何发送消息?

// chat message 发送消息事件,由后台约定,可变
socket.emit('chat message', '消息内容')

5.如何接收消息?

// chat message 接收消息事件,由后台约定,可变
socket.on('chat message', (ev) => {// ev 是服务器发送的消息
})

6.如何关闭连接?

// 离开组件需要使用
socket.close()
  • sockt.io 在前端使用的js库需要知道哪些内容?
    • 如何建立链接 io('地址')
    • 连接成功的事件 connect
    • 如何发消息 emit + 事件
    • 如何收消息 on + 事件
    • 如果关闭连接 close()

7.通讯规则 

chatMsgList 接收聊天记录

sendChatMsg 发送消息

receiveChatMsg 接收消息

updateMsgStatus 消息已读

getChatMsgList 获取聊天记录

statusChange 接收订单状态改变

 8.问诊室-建立连接

步骤:

  • 安装 sokect.io-client 包
  • 在组件挂载完毕,进行socket连接
  • 监听连接成功,监听错误消息,监听关闭连接
  • 组件卸载关闭连接

代码:

  • 安装 sokect.io-client 包

 

pnpm add socket.io-client
import type { Socket } from 'socket.io-client'
import { io } from 'socket.io-client'
import { onMounted, onUnmounted } from 'vue'
import { baseURL } from '@/utils/request'
import { useUserStore } from '@/stores'
import { useRoute } from 'vue-router'const store = useUserStore()
const route = useRoute()let socket: Socket
onUnmounted(() => {socket.close()
})
onMounted(async () => {// 建立链接,创建 socket.io 实例socket = io(baseURL, {auth: {token: `Bearer ${store.user?.token}`},query: {orderId: route.query.orderId}})socket.on('connect', () => {// 建立连接成功console.log('connect')})socket.on('error', (event) => {// 错误异常消息console.log('error')})socket.on('disconnect', ()=> {// 已经断开连接console.log('disconnect')})
})

9.问诊室-默认消息

步骤:

  • 监听默认聊天记录,并且处理处理成消息列表
  • 提取常量数据
  • 进行渲染
  • 预览病情图片

代码:

1)监听默认聊天记录,并且处理处理成消息列表 Room/index.vue

import { MsgType } from '@/enums'
import type { Message, TimeMessages } from '@/types/room'const list = ref<Message[]>([])
  // 聊天记录socket.on('chatMsgList', ({ data }: { data: TimeMessages[] }) => {// 准备转换常规消息列表const arr: Message[] = []data.forEach((item, i) => {arr.push({msgType: MsgType.Notify,msg: { content: item.createTime },createTime: item.createTime,id: item.createTime})arr.push(...item.items)})// 追加到聊天消息列表list.value.unshift(...arr)})

 

  1. 抽取常量数据 services/constants.ts
import { IllnessTime } from '@/enums'export const timeOptions = [{ label: '一周内', value: IllnessTime.Week },{ label: '一月内', value: IllnessTime.Month },{ label: '半年内', value: IllnessTime.HalfYear },{ label: '大于半年', value: IllnessTime.More }
]
export const flagOptions = [{ label: '就诊过', value: 0 },{ label: '没就诊过', value: 1 }
]

 

 3)进行渲染 Room/components/RoomMessage.vue

 

<room-message :list="list" />

 

import { IllnessTime } from '@/enums'
import { flagOptions, timeOptions } from '@/services/constants'defineProps<{ list: Message[] }>()const getIllnessTimeText = (time: IllnessTime) =>timeOptions.find((item) => item.value === time)?.labelconst getConsultFlagText = (flag: 0 | 1) =>flagOptions.find((item) => item.value === flag)?.label
  <template v-for="{ msgType, msg, createTime, from } in list" :key="msg.id"><!-- 病情描述 --><div class="msg msg-illness" v-if="msgType === MsgType.CardPat"><div class="patient van-hairline--bottom" v-if="msg.consultRecord"><p>{{ msg.consultRecord.patientInfo.name }}{{ msg.consultRecord.patientInfo.genderValue }}{{ msg.consultRecord.patientInfo.age }}岁</p><p>{{ getIllnessTimeText(msg.consultRecord.illnessTime) }} |{{ getConsultFlagText(msg.consultRecord.consultFlag) }}</p></div><van-row><van-col span="6">病情描述</van-col><van-col span="18">{{ msg.consultRecord?.illnessDesc }}</van-col><van-col span="6">图片</van-col><van-col span="18" @click="previewImg(msg.consultRecord?.pictures)"> 点击查看 </van-col></van-row></div><!-- 温馨提示 --><div class="msg msg-tip" v-if="msgType === MsgType.NotifyTip"><div class="content"><span class="green">温馨提示:</span><span>{{ msg.content }}</span></div></div><!-- 通用通知 --><div class="msg msg-tip" v-if="msgType === 31"><div class="content"><span>{{ msg.content }}</span></div></div></template>    

总结

什么是Socket.IO

Socket.IO是一个库,可用于在浏览器和服务器之间进行实时,双向和基于事件的通信。它包括:

  • 使Node.js服务器:来源 | API
  • 为浏览器(可从Node.js的也运行)一个JavaScript客户端库:来源 | API

其主要特点是:

可靠性

即使存在以下情况,也会建立连接:

  • 代理和负载平衡器。
  • 个人防火墙和防病毒软件。

为此,它依赖于Engine.IO,该引擎首先建立长轮询连接,然后尝试升级到在侧面进行“测试”的更好传输,例如WebSocket。请参阅“ 目标”部分以获取更多信息。

自动重新连接支持

除非另有指示,否则断开连接的客户端将尝试永久重新连接,直到服务器再次可用为止。请在此处查看可用的重新连接选项。

断线检测

心跳机制在Engine.IO级别上实现,使服务器和客户端都可以知道对方何时不再响应。

通过在服务器和客户端上设置计时器,并在连接握手期间共享超时值(pingInterval和pingTimeout参数),可以实现该功能。这些计时器要求将任何后续客户端调用都定向到同一服务器,因此使用多个节点时需要执行粘性会话。

二进制支持

可以发出任何可序列化的数据结构,包括:

  • 浏览器中的ArrayBuffer和Blob
  • Node.js中的ArrayBuffer和Buffer

多路传输支持

为了在应用程序内创建关注点分离(例如,每个模块或基于权限),Socket.IO允许您创建多个Namespaces,它们将充当单独的通信通道,但将共享相同的基础连接。

客房支援

在每个Namespace中,您可以定义套接字可以加入和离开的任意通道,称为Rooms。然后,您可以广播到任何给定的房间,到达已加入该房间的每个插槽。

这是有用的功能,用于向一组用户或连接到多个设备的给定用户发送通知。

这些功能附带一个简单便捷的API,如下所示:

io.on('connection',function(socket) { socket.emit('request',/ * * /); //向套接字发出事件io.emit('broadcast',/ * * /); / /向所有连接的套接字发出事件socket.on('reply',function() { / * * / }); //监听事件});

什么不是Socket.IO

Socket.IO 不是 WebSocket实现。尽管Socket.IO确实确实在可能的情况下使用WebSocket作为传输工具,但它会向每个数据包添加一些元数据:当需要消息确认时,数据包类型,名称空间和数据包ID。这就是为什么WebSocket客户端将无法成功连接到Socket.IO服务器,而Socket.IO客户端也将无法连接到WebSocket服务器的原因。请在此处查看协议规范。

//警告:客户端将无法连接!
const client = io('ws://echo.websocket.org');

安装

npm install --save socket.io

Javascript客户端

默认情况下,服务器会公开客户端的独立版本/socket.io/socket.io.js

也可以从CDN提供服务,例如cdnjs。

若要从Node.js的使用就像一个捆绑使用,或的WebPack或browserify,您还可以安装NPM包:

npm install-save socket.io-client

 

其他客户端实施

有几种其他语言的客户端实现,由社区维护:

  • Java:https://github.com/socketio/socket.io-client-java
  • C ++:https://github.com/socketio/socket.io-client-cpp
  • 斯威夫特:https : //github.com/socketio/socket.io-client-swift
  • 飞镖:https://github.com/rikulo/socket.io-client-dart
  • Python:https://github.com/miguelgrinberg/python-socketio
  • .Net:https://github.com/Quobject/SocketIoClientDotNet

与Node http服务器一起使用

服务器(app.js)

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');app.listen(80);function handler (req, res) {fs.readFile(__dirname + '/index.html',function (err, data) {if (err) {res.writeHead(500);return res.end('Error loading index.html');}res.writeHead(200);res.end(data);});
}io.on('connection', function (socket) {socket.emit('news', { hello: 'world' });socket.on('my other event', function (data) {console.log(data);});
});  

 客户端(index.html)

<script src="/socket.io/socket.io.js"></script>
<script>var socket = io('http://localhost');socket.on('news', function (data) {console.log(data);socket.emit('my other event', { my: 'data' });});
</script>

与Express一起使用

服务器(app.js)

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);server.listen(80);
// WARNING: app.listen(80) will NOT work here!app.get('/', function (req, res) {res.sendFile(__dirname + '/index.html');
});io.on('connection', function (socket) {socket.emit('news', { hello: 'world' });socket.on('my other event', function (data) {console.log(data);});
});

客户端(index.html)

<script src="/socket.io/socket.io.js"></script>
<script>var socket = io.connect('http://localhost');socket.on('news', function (data) {console.log(data);socket.emit('my other event', { my: 'data' });});
</script>

发送和接收事件

Socket.IO允许您发射和接收自定义事件。此外connectmessagedisconnect,你可以发出自定义事件:

服务器

// note, io(<port>) will create a http server for you
var io = require('socket.io')(80);io.on('connection', function (socket) {io.emit('this', { will: 'be received by everyone'});socket.on('private message', function (from, msg) {console.log('I received a private message by ', from, ' saying ', msg);});socket.on('disconnect', function () {io.emit('user disconnected');});
});

如果您可以控制为特定应用程序发出的所有消息和事件,则可以使用默认值/命名空间。如果您想利用第三方代码或生成与他人共享的代码,socket.io提供了一种命名套接字的方式。

这具有multiplexing单个连接的优点。不是使用两个WebSocket连接,而是使用一个连接。

服务器(app.js)

var io = require('socket.io')(80);
var chat = io.of('/chat').on('connection', function (socket) {socket.emit('a message', {that: 'only', '/chat': 'will get'});chat.emit('a message', {everyone: 'in', '/chat': 'will get'});});var news = io.of('/news').on('connection', function (socket) {socket.emit('item', { news: 'item' });});

客户端(index.html)

<script>var chat = io.connect('http://localhost/chat'), news = io.connect('http://localhost/news');chat.on('connect', function () {chat.emit('hi!');});news.on('news', function () {news.emit('woot');});
</script>

发送易失性消息

有时可能会丢弃某些消息。假设您有一个应用程序可显示关键字的实时推文bieber

如果某个客户端尚未准备好接收消息(由于网络速度慢或其他问题,或者由于它们是通过长时间轮询连接的,并且处于请求-响应周期的中间),则它没有接收到所有推文与bieber相关,您的应用程序不会受到影响。

在这种情况下,您可能希望将这些消息作为易失性消息发送。

服务器

var io = require('socket.io')(80);io.on('connection', function (socket) {var tweets = setInterval(function () {getBieberTweet(function (tweet) {socket.volatile.emit('bieber tweet', tweet);});}, 100);socket.on('disconnect', function () {clearInterval(tweets);});
});

发送和获取数据(确认)

有时,当客户端确认消息接收后,您可能希望获得回调。

为此,只需将函数作为.send或的最后一个参数传递即可.emit。而且,当您使用时.emit,确认是由您完成的,这意味着您还可以传递数据:

服务器(app.js)

var io = require('socket.io')(80);io.on('connection', function (socket) {socket.on('ferret', function (name, word, fn) {fn(name + ' says ' + word);});
});

客户端(index.html)

<script>var socket = io(); // TIP: io() with no args does auto-discoverysocket.on('connect', function () { // TIP: you can avoid listening on `connect` and listen on events directly too!socket.emit('ferret', 'tobi', 'woot', function (data) { // args are sent in order to acknowledgement functionconsole.log(data); // data will be 'tobi says woot'});});
</script>

广播消息

要广播,只需broadcastemitsend方法调用中添加一个标志。广播意味着将消息发送到其他人(除了启动该消息的套接字之外)。

服务器

var io = require('socket.io')(80);io.on('connection', function (socket) {socket.broadcast.emit('user connected');
});

像跨浏览器的WebSocket一样使用它

如果只需要WebSocket语义,也可以这样做。只需利用send并收听message事件:

服务器(app.js)

var io = require('socket.io')(80);io.on('connection', function (socket) {socket.on('message', function () { });socket.on('disconnect', function () { });
});

客户端(index.html)

<script>var socket = io('http://localhost/');socket.on('connect', function () {socket.send('hi');socket.on('message', function (msg) {// my msg});});
</script>

如果不关心此类的重新连接逻辑,请查看Engine.IO,这是Socket.IO使用的WebSocket语义传输层。

项目应用源码参考:lien0219/consult-patient-h5: 在线医疗h5项目,可以在线问诊,使用vue3+ts+pinia+websocket技术栈,项目包含第三方授权登录,订单支付,暂时支持支付宝支付,问诊咨询即时通讯等技术 (github.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/685160.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript中null和undefined的区别

JavaScript中null和undefined是两个特殊的值&#xff0c;经常在编程中遇到。虽然它们经常被混淆&#xff0c;但它们有着不同的含义和用法。本文将详细介绍JavaScript中null和undefined的区别&#xff0c;帮助开发者更好地理解和使用它们。 首先&#xff0c;让我们来了解一下nu…

EF Core 模型优先——根据类对象创建数据表

需要的nuget包&#xff1a; Microsoft.EntityframeworkCore.SqlServer &#xff08;根据自己的数据库类型选择对应的nuget包&#xff09; Microsoft.EntityframeworkCore.Tools Microsoft.VisualStudio.Web.CodeGeneration.Design 说明&#xff1a; &#xff08;1&#xf…

[java基础揉碎]数组 值拷贝和引用拷贝的赋值方式

目录 数组的介绍 为什么有数组 数组的三种使用方式 动态初始化: 静态初始化: 数组使用注意事项和细节 值拷贝和引用拷贝的赋值方式 数组反转: 数组拷贝: 数组的介绍 数组可以存放多个同一类型的数据。数组也是一种数据类型&#xff0c;是引用类型。 即&#xff1a;数组…

算法刷题day13

目录 引言一、蜗牛 引言 今天时间有点紧&#xff0c;只搞了一道题目&#xff0c;不过确实搞了三个小时&#xff0c;才搞完&#xff0c;主要是也有点晚了&#xff0c;也好累啊&#xff0c;不过也还是可以的&#xff0c;学了状态DP&#xff0c;把建图和spfa算法熟悉了一下&#…

2024.2.13日总结(小程序开发6)

外联的wxs脚本 在wxml中引入外联的wxs脚本时&#xff0c;必须为<wxs>标签添加module和src属性 module用来指定模块的名称src用来指定要引入的脚本的路径&#xff0c;且必须是相对路径 wxs的特点 与JavaScript 不同 wxs 语言在设计时借大量鉴了JavaScript 的语法。但…

实验5-9 使用函数输出水仙花数

水仙花数是指一个N位正整数&#xff08;N≥3&#xff09;&#xff0c;它的每个位上的数字的N次幂之和等于它本身。例如&#xff1a;153135333。 本题要求编写两个函数&#xff0c;一个判断给定整数是否水仙花数&#xff0c;另一个按从小到大的顺序打印出给定区间(m,n)内所有的水…

【计算机网络地址转换(NAT)详解】

文章目录 什么是NAT&#xff1f;NAT的工作原理NAT的应用1. 内部网络管理2. 隐藏内部网络结构3. IPv4地址节省 什么是NAT&#xff1f; 网络地址转换&#xff08;NAT&#xff09;允许多个主机共享一个或一组公共IP地址&#xff0c;同时保护内部网络的隐私和安全。NAT通常由路由器…

WEB APIs(2)

应用定时器可以写一个定时轮播图&#xff0c;如下 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport&qu…

基于 InternLM 和 LangChain 搭建你的知识库(三)

基于 InternLM 和 LangChain 搭建你的知识库 大模型开发范式 Finetune 在大型语言模型中&#xff0c;Finetune&#xff08;微调&#xff09;是一种技术&#xff0c;用于调整预训练的模型以提高其在特定任务或数据集上的表现。这种方法通常涉及以下步骤&#xff1a; 预训练模…

【MySQL】:DQL查询

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; MySQL从入门到进阶 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一. DQL1.1 基本语法1.2 基础查询1.3 条件查询1.3 聚合函数 &#x1f324;️ 全篇…

【Linux取经路】文件系统之被打开的文件——文件描述符的引入

文章目录 一、明确基本共识二、C语言文件接口回顾2.1 文件的打开操作2.2 文件的读取写入操作2.3 三个标准输入输出流 三、文件有关的系统调用3.1 open3.1.1 比特位级别的标志位传递方式 3.2 write3.2.1 模拟实现 w 选项3.2.2 模拟实现 a 选项 3.3 read 四、访问文件的本质4.1 再…

C#系列-EntityFrameworkCore.SqlServer.NodaTime实例(37)

EntityFrameworkCore.SqlServer.NodaTime 是一个扩展包&#xff0c;它允许你使用 NodaTime 库中的日期和时间类型与 SQL Server 数据库进行交互。NodaTime 是一个流行的.NET 日期和时间库&#xff0c;它提供了比 .NET 内置的 DateTime 和 DateTimeOffset 类型更丰富的功能和更好…

探讨:工业物联网,纯上报设备的数采

事情是这样的&#xff0c;有一台设备是modbus-tcp协议&#xff0c;手工操作测量&#xff0c;自动发送测量结果&#xff0c;就这&#xff0c;没别的了。 开始看起来挺简单&#xff0c;连接上去就等着收数据嘛&#xff0c;多简单&#xff01;后来发现麻烦得很啊&#xff0c;关键的…

【深度学习】S2 数学基础 P4 概率论

目录 基本概率论概率论公理随机变量 多个随机变量联合概率条件概率贝叶斯定理求和法则独立性 期望与方差小结 基本概率论 机器学习本质上&#xff0c;就是做出预测。而概率论提供了一种量化和表达不确定性水平的方法&#xff0c;可以帮助我们量化对某个结果的确定性程度。 在…

状态模式:灵活管理对象状态的设计策略

状态模式&#xff1a;灵活管理对象状态的设计策略 在软件开发的过程中&#xff0c;我们经常会遇到对象根据其内部状态的改变而改变其行为的场景。传统的处理方式可能会使用大量的条件判断语句来处理不同的状态转换以及相应的行为&#xff0c;这不仅使得代码难以维护&#xff0…

【UI自动化测试技术】自动化测试研究:Python+Selenium+Pytest+Allure,详解UI自动化测试,iframe、窗口等控件切换(精)(五)

导言 在上一篇文章里&#xff0c;我们一起学习了键盘事件、鼠标事件以及其它的一些特殊情况的处理。这篇文章我们一起学习Selenium中一些特殊窗口以及iframe&#xff0c;如何处理。 学习目标 了解对浏览器的基本功能操作&#xff08;本节重点&#xff09;学习如何对弹窗进行操…

素数算法(普通求解,埃氏筛,欧拉筛)

素数算法&#xff08;常规求解&#xff0c;埃氏筛&#xff0c;欧拉筛&#xff09; 1. 常规求解1.1 原理解释1.2 算法实现 2 . 埃氏筛2.1 原理解释2.2 算法实现 3. 欧拉筛3.1 原理解释3.2 算法实现 1. 常规求解 1.1 原理解释 枚举法是一种简单的求解素数的方法&#xff0c;其基…

黑马程序员java部分笔记(持续更新)九点五:数组的动态初始化与常见问题

为什么有动态初始化呢? 当 不知道数组里几个元素的具体值时用动态初始化 动态初始化&#xff1a;初始化时只指定数组长度&#xff0c;由系统分配初始值 格式&#xff1a;数据类型[]数组名new 数据类型[数组长度]; 特点&#xff1a;在创建的时候有自己指定数组长度&#xff0c;…

Java的集合框架和泛型

文章目录 集合框架什么是集合框架类和接口总览 集合框架的重要性背后所涉及的数据结构以及算法什么是数据结构容器背后对应的数据结构什么是算法 包装类基本数据类型和对应的包装类装箱和拆箱自动装箱和自动拆箱 泛型什么是泛型引出泛型语法泛型类泛型的上界(没有下界)泛型方法…

心理辅导|高校心理教育辅导系统|基于Springboot的高校心理教育辅导系统设计与实现(源码+数据库+文档)

高校心理教育辅导系统目录 目录 基于Springboot的高校心理教育辅导系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、学生功能模块的实现 &#xff08;1&#xff09;学生登录界面 &#xff08;2&#xff09;留言反馈界面 &#xff08;3&#xff09;试卷列表界…