首页 > 其他分享 >vues全局使用WebSocket

vues全局使用WebSocket

时间:2023-05-30 16:45:55浏览次数:49  
标签:function Toast WebSocket log vues console 全局 监听 socket

// import { showInfoMsg, showErrorMsg } from '@/utils/popInfo'
// import ElementUI from 'element-ui';
import { Toast } from 'vant';
function initWebSocket(baseObj) {
    console.log(baseObj)
    // const wsUri = WS_API + "/webSocket/" + e;
    // var wsUri ="ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5";
    var wsUri = "ws://192.168.11.87:8088/level/gauge/1/2"
    this.socket = new WebSocket(wsUri)//这里面的this都指向vue
      // 监听socket连接
     this.socket.onopen =  WebSocketOnopen;
     // 监听socket错误信息
    this.socket.onerror = webSocketOnError;
     // 监听socket消息
    this.socket.onmessage = webSocketOnMessage;
    // 监听socket关闭
    this.socket.onclose = closeWebsocket;
}
// this.$websocket.close();//全局 关闭
// this.$websocket.initWebSocket(xxx); //全局 吊起
// 监听socket连接
function WebSocketOnopen(e) {
    console.log("socket连接成功")
    Toast("socket连接成功" )
}
 // 监听socket错误信息
function webSocketOnError(e) {
    console.log(e)
    Toast("WebSocket连接发生错误" + e)
}
// 监听socket消息
function webSocketOnMessage(e) {
    console.log(e)
    Toast("接收到信息了")
    let messObj=JSON.parse(e.data)
    if(messObj.code==500){
        this.close() 
        Toast("断开了")
    }
    // console.log('错误信息',e)
    // const data = JSON.parse(e.data);
}

// 关闭websiocket
function closeWebsocket() {
    console.log('连接已关闭...')
}
function close() {
    this.socket.close() // 关闭 websocket
    this.socket.onclose = function (e) {
        console.log(e)//监听关闭事件
        console.log('关闭')
    }
}
function webSocketSend(agentData) {
    this.socket.send(agentData);
}
export default {
    initWebSocket, close
}

 

标签:function,Toast,WebSocket,log,vues,console,全局,监听,socket
From: https://www.cnblogs.com/dianzan/p/17443641.html

相关文章

  • Tailwind CSS与写全局样式的优势
    TailwindCSS是一个基于原子类的CSS框架,它提供了一系列的CSS类,可以用来快速构建网页界面。与传统的CSS框架不同,TailwindCSS不是提供一些预定义的样式,而是提供了一系列的原子类,诸如 flex, pt-4, text-center 和 rotate-90 这样的的类,这些原子类可以组合使用,从而构建......
  • java服务端如何接入WebSocket?
    日常工作中,我们都是使用http请求,来进行前后交互,那么我们也会有使用websocket来进行前后交互的时候,那么它俩有什么区别呢?http和websocket区别WebSocket是双向通信协议,模拟Socket协议,可以双向发送或接受信息HTTP是单向的WebSocket是需要浏览器和服务器握手进行建立连接的而http......
  • store文件夹 vue_vue-cli2使用store存储全局变量
    1.引入store安装引入vuex,在main.js里面:importstorefrom'./store'//store引入newVue({el:'#app',router,store,//store引入components:{App},template:''})在store文件夹下创建index.js入口文件,添加下面内容:importVuefrom'vue';im......
  • 微信小程序 WXSS模板样式,全局和页面配置,网络请求
    【黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)】https://www.bilibili.com/video/BV1834y1676P/?p=26&share_source=copy_web&vd_source=03c1dc52eeb3747825ecad0412c18ab1WXSS模板样式1.什么是WXSSWXSS(WeiXin......
  • 全局解释器锁GIL
    GIL的作用是在同一时间只允许一个线程执行Python字节码,即保证了在解释器级别上同一时刻只有一个线程执行Python代码优点: ......
  • thinkphp正确开发系列:使用全局中间件统计当天活跃用户
    背景:pv、uv大家应该了解,不懂得搜索一下就知道了,现在有这么一个需求:统计当天有哪些用户登录了系统,也即:同一个用户,在一天之内第一次登录系统,记为1次,一天之内的后续登录(在登录状态刷新页面)忽略,项目使用的是thinkphp6,前后端分离架构。 实现方案:我们知道,php的开发框架,如:laravel、t......
  • vscode 自定义代码字体颜色,局部变量、全局变量、函数、宏、属性
    vscode自定义代码字体与颜色风格在setting.json中修改即可:在这里插入图片描述"editor.semanticTokenColorCustomizations":{       "enabled":true,//enableforallthemes       "rules":{           "*.static":{             ......
  • java全局配置
    <settings><settingname="mapUnderscoreToCamelCase"value="true"/><settingname="cacheEnabled"value="true"/></settings><typeAliases><!--<typeA......
  • 如何在 Go 中创建 WebSocket 应用程序
    要基于net/http库编写一个简单的WebSocket回显服务器,您需要:发起握手从客户端接收数据帧向客户端发送数据帧关闭握手首先,让我们创建一个带有WebSocket端点的HTTP处理程序://HTTPserverwithWebSocketendpointfuncServer(){http.HandleFunc("/",func......
  • React 全局Loading
    import{Spin}from'antd'importReactDOMfrom'react-dom/client'importtype{SpinProps}from'antd'classLoading{privatecontainer=document.createElement('div')privateroot=ReactDOM.createRoot(this.co......