当前位置:首页 » 《资源分享》 » 正文

前端WebSocket

6 人参与  2024年11月07日 11:23  分类 : 《资源分享》  评论

点击全文阅读


websocket实际项目开发中客户端(前端)使用websockect主要实现的功能是发送和接收信息而服务端实现接收、转发(负责两个客户端通信类似于一个通信基站)、发送消息功能。

项目中用到的相关技术vue3、vite、js(要通过WebSocket构造函数,创建WebSocket对象)、node.js、ws(是nodejs的一个WebSocket库,可以用来创建服务)

websocket服务端以node.js中使用为例(实际项目开发中可使用其他后端语言如java、python等)

创建相关文件目录

2c84f986c8214042b37a2cd69a302617.png

server.js代码

//服务(服务类似于一个水库)和链接(类似于一根根链接水库和用户的管道)//这样的话管道就会有等多根(也就是链接会有多条如a用户和服务的链接和b用户和服务的链接)const webscoket = require('ws')const url = require('url')let webScoketServer = new webscoket.Server({port: '8000'}) //创建服务 //ws 是管道let pool = new Map() //可能有多个用户链接 所以有多个管道 所以需要存储我们有那些管道链接let idList = ['1','2']//监听webScoketServer的长连接webScoketServer.on('connection',(ws,req)=> {    let id = url.parse(req.url,true).query.id; //获取用户id    let token = req.headers['sec-websocket-protocol'] //获取用户token    console.log(id);    console.log(token);    if(idList.indexOf(id) === -1) { //判断用户是否存在        ws.send(JSON.stringify({            type:'error',            msg: 'id不正确'        }))        ws.close()    }    pool.set('connection'+id,ws) //存储相应的链接    //针对链接进行监听    ws.on('message',(msg)=> {        console.log(msg.toString())        ws.send(JSON.stringify(            {                type: 'msg',                msg:'收到' + msg.toString()            }        ))    })    //关闭    ws.on('close',()=> {    })    //错误    ws.on('error',()=> {            })    //发送消息    ws.send(JSON.stringify({a:123444}))})

上面的代码我们用node.js创建了一个websocket服务 

websocket客户端以vue中使用为例

创建相关文件目录

1007c109513040fcbc06a344f9eadda6.png

App.vue文件

<template>  <div>webSocket</div>  <div>    用户1    <input v-model="inputValue" />    <button @click="sendMsg">发送</button>    <button>关闭</button>  </div></template><style scoped></style>

效果

72d0fbdcdfb04b6da58e4dda283dde82.png

发送按钮绑定自定义事件sendMsg()

<script setup>import { ref } from 'vue'let inputValue = ref('')function sendMsg() {  client.send(inputValue.value)}</script>

连接创建好的webSocket服务

client = new WebSocket('ws://localhost:8000?id=1', ['afdsfsdfdsffsdf'])

通过webSocket提供的事件触发相关功能

close(关闭)

error (错误)

message (接收消息)

open (连接)

  //也可以用addEventLister监听  client.onopen = () => {    clearTimeout(reconnentTimer)    headerBeat() //连接上后就开启心跳检测    console.log('连接上了')  }  client.onmessage = (msg) => {    //后端有消息    console.log(JSON.parse(msg.data))  }  client.onclose = () => {    reconnect()    console.log('close')  }  client.onerror = () => {    tryTime += 1    reconnect()    console.log('error')  }

这里我将连接和监听相关事件封装成了一个方法

const initWebSocket = () => {   client = new WebSocket('ws://localhost:8000?id=1', ['afdsfsdfdsffsdf'])  //也可以用addEventLister监听  client.onopen = () => {    clearTimeout(reconnentTimer)    headerBeat() //连接上后就开启心跳检测    console.log('连接上了')  }  client.onmessage = (msg) => {    //后端有消息    console.log(JSON.parse(msg.data))  }  client.onclose = () => {    reconnect()    console.log('close')  }  client.onerror = () => {    tryTime += 1    reconnect()    console.log('error')  }}

基本功能实现后为了保证websocket连接的一个持续效果和避免websocket服务因为网络或其他原因给我们断开连接所以我们还要实现定时重连和心跳检测的功能

定时重连实现

//websocket重连方法 /*   重连不可能永远都进行重新连接那样的话触发的就太频繁了 所以需要一个定时器*/const reconnect = () => {  //清除定时器  clearTimeout(reconnentTimer)  //用一个定时器避免频繁重连  if(tryTime > maxTime) { //重连次数超过3次就不再重连     alert('重连次数超过3次,请联系管理员!')     clearTimeout(reconnentTimer)     clearInterval(headerBeatTimer)     return  }  reconnentTimer = setTimeout(() => {    initWebSocket()  }, 2000)}

心跳检测实现

//webSockte 心跳检测const headerBeat = () => {  clearInterval(headerBeatTimer)  headerBeatTimer = setInterval(()=> {    client.send(JSON.stringify({      type: 'headerBeat',      msg: 'test'    }))  },3000)}

App.vue完整代码

<script setup>import { ref } from 'vue'let inputValue = ref('')let maxTime = 3 //重连最大的连接次数let tryTime = 0 //重连后出错的次数let reconnentTimer //重连定时器let clientlet headerBeatTimer //心跳定时器//建立和webSocket服务的链接//webSocket不可能让所有人随便连接,所以我们需要携带token或者id//心跳检测 定期向websocket服务发送消息维持心跳是为了避免websocket给我们断开连接//定时重连 如果连接中断或者出错我们需要重新连接保证websocket连接的一个持续效果/* 1.直接带在url的query2.带在请求头上3.cookie*/const initWebSocket = () => {   client = new WebSocket('ws://localhost:8000?id=1', ['afdsfsdfdsffsdf'])  //也可以用addEventLister监听  client.onopen = () => {    clearTimeout(reconnentTimer)    headerBeat() //连接上后就开启心跳检测    console.log('连接上了')  }  client.onmessage = (msg) => {    //后端有消息    console.log(JSON.parse(msg.data))  }  client.onclose = () => {    reconnect()    console.log('close')  }  client.onerror = () => {    tryTime += 1    reconnect()    console.log('error')  }}//websocket重连方法 /*   重连不可能永远都进行重新连接那样的话触发的就太频繁了 所以需要一个定时器*/const reconnect = () => {  //清除定时器  clearTimeout(reconnentTimer)  //用一个定时器避免频繁重连  if(tryTime > maxTime) { //重连次数超过3次就不再重连     alert('重连次数超过3次,请联系管理员!')     clearTimeout(reconnentTimer)     clearInterval(headerBeatTimer)     return  }  reconnentTimer = setTimeout(() => {    initWebSocket()  }, 2000)}//webSockte 心跳检测const headerBeat = () => {  clearInterval(headerBeatTimer)  headerBeatTimer = setInterval(()=> {    client.send(JSON.stringify({      type: 'headerBeat',      msg: 'test'    }))  },3000)}function sendMsg() {  client.send(inputValue.value)}initWebSocket()</script><template>  <div>webSocket</div>  <div>    用户1    <input v-model="inputValue" />    <button @click="sendMsg">发送</button>    <button>关闭</button>  </div></template><style scoped></style>

实现效果

cf13e5fe01de4bfa8a108e88da0fa55d.png a1e0cfb61e0c4d76a690f369fd0a389d.png

代码地址

司徒飞/vue-websockethttps://gitee.com/situ_fei/vue-websocket.git
司徒飞/vue-websocket-serverhttps://gitee.com/situ_fei/vue-websocket-server.git

 


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/183593.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 重生后我和太监联手灭了敌国喻辰,林雪续集(重生后我和太监联手灭了敌国)终极反转(喻辰,林雪)全篇一口气阅读
  • 我不做灵媒后,自称灵媒摆渡人的养妹害怕了内容精选_苏晓霍老阿姐无广告_小说后续在线阅读_无删减免费完结_
  • 前传一别再无相见续集:全文+番外戚许许樵风:结局+番外新上热文
  • 嫂子照顾我怀孕生子,我倒欠她一个孩子最新目录_老公婆婆龙凤胎一口气看完_小说后续在线阅读_无删减免费完结_
  • 卿本祸水小说(苏窈,冰冷,萧霁寒)+起点章节(卿本祸水)阅读
  • 楚寻眠周煜衡小说(明月不照离人泪)章节目录+起始篇章(楚寻眠周煜衡)全章无套路在线
  • 末世重生,我以暴杀丧尸开始氪命无敌完结txt_张凡林婉清独家番外_小说后续在线阅读_无删减免费完结_
  • 顾泽茗林依依小说无删减阅读无干扰(总裁,请原地投降)番外+续集
  • 公主她唯我独尊,一刀一个气运者结局+番外_怀江厉沉锋高分言情_小说后续在线阅读_无删减免费完结_
  • 沈清霜顾砚之:结局+番外免费品鉴黑莲花嫡女:首辅大人天天护短:结局+番外评价五颗星
  • 学神演舔狗,毕竟他妈给的太多了列表_学神演舔狗,毕竟他妈给的太多了(苏允沈司野)
  • 多子多福,从百妻千子到万古仙朝最新试读_叶枫林清音连载_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1