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

这篇具有很好参考价值的文章主要介绍了关于项目中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.通讯规则 

关于项目中websocket的socket.io客户端js库的应用,websocket,服务器,网络协议

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)?.label

const 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-discovery
  socket.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 function
      console.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)文章来源地址https://www.toymoban.com/news/detail-826247.html

到了这里,关于关于项目中websocket的socket.io客户端js库的应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Charles:移动端抓包 / windows客户端 / iOS手机 / HarmonyOS 4.0 / 手机访问PC本地项目做调试

    一、背景描述 1.1、本文需求:移动端进行抓包调试 1.2、理解Charles可以做什么 Charles是一款跨平台的网络代理软件,可以用于捕获和分析网络流量,对HTTP、HTTPS、HTTP/2等协议进行调试和监控。使用Charles可以帮助开发人员进行Web开发、调试和测试,同时也可以用于网络安全和隐

    2024年02月08日
    浏览(60)
  • Socket实例,实现多个客户端连接同一个服务端代码&TCP网络编程 ServerSocket和Socket实现多客户端聊天

    Java socket(套接字)通常也称作\\\"套接字\\\",用于描述ip地址和端口,是一个通信链的句柄。应用程序通常通过\\\"套接字\\\"向网络发出请求或者应答网络请求。 使用socket实现多个客户端和同一客户端通讯;首先客户端连接服务端发送一条消息,服务端接收到消息后进行处理,完成后再

    2024年02月12日
    浏览(76)
  • C# Socket编程(服务端、客户端)

    1.最直白的Socket代码 服务端 客户端 2.封装过有点绕的Socket代码 服务端 客户端 3.GitHub代码 https://github.com/harrylsp/AndroidADBDriver

    2024年02月16日
    浏览(49)
  • JAVA调用Bartender进行标签打印(可本地用打印机客户端进行测试打印,【云上的项目】可通过WebSocket进行通讯进行打印)

    用Java编写一个打印标签客户端  点击运行启动会打开首页  可以点击预览打印  点击打印可测试成功     打印机结果  前端用的是thymeleaf 代码片段 后端代码  页面上预览图片和真实打印机打出来的不一致是正常的因为这是测试打印(测试本地电脑是否符合使用打印机客户

    2024年02月15日
    浏览(54)
  • Android studio socket客户端应用设计

    一、XML布局设计:

    2024年02月03日
    浏览(43)
  • Java WebSocket客户端

    1.依赖 2.代码 1.依赖 2.代码 2.1 自定义 websocket handler 2.2 将websocket handler加入容器 2.3 定时器监控

    2024年02月16日
    浏览(44)
  • 客户端 WebSocket详细用法

    WebSocket是一种网络通信协议,很多高级功能都需要用到它。 有些人会想,既然我们已经有了HTTP协议了,为什么还要花时间学另一种协议呢?这个协议到底有什么魔力,值得我们花时间学它。 因为 HTTP 协议有一个缺陷:通信只能由客户端发起。只能是客户端向服务器发出请求

    2024年02月04日
    浏览(45)
  • java socket Server TCP服务端向指定客户端发送消息;可查看、断开指定连接的客户端;以及设置客户端最大可连接数量。

    首先需要知道java里如何创建一个Socket服务器端。 提示:注意server.accept()方法调用会阻塞,只有新的客户端连接后才返回一个新的socket对象。如果一直未连接那么会一直处于阻塞状态 了解了如何创建一个socket服务器端后。那么如何实现给指定的连接客户端发送消息呢?首先我

    2024年02月11日
    浏览(73)
  • C# socket——简单的TCP 客户端 连接通信

    TCP编程的客户端一般步骤是: 1、创建一个socket,用函数socket()。 2、设置socket属性。 3、设置要连接的对方的IP地址和端口等属性。 4、连接服务器,用函数connect()。 5、收发数据,用函数send()和recv(),或者read()和write()。 6、关闭网络连接。 using System; using System.Net; using System.

    2024年02月11日
    浏览(53)
  • SpringBoot WebSocket做客户端

    常见的都是springboot应用做服务,前端页面做客户端,进行websocket通信进行数据传输交互。但其实springboot服务也能做客户端去连接别的webSocket服务提供者。 刚好最近在项目中就使用到了,需求背景大概就是我们作为一个java段应用需要和一个C语言应用进行通信。在项目需求及

    2024年02月11日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包