vue中使用WebSocket

矫情吗；* 2023-01-03 14:17 196阅读 0赞

export default { 
    	data(){ 
    		return { }
    	},
    	created(){ 
    	  this.initWebSocket();
    	},
    	destroyed(){ 
    	  this.websock.close() //离开路由之后断开websocket连接
    	},
    	methods:{ 
    	  initWebSocket() {  //初始化weosocket
                const wsuri = "ws://172.16.26.133:8080/xcdpWK/"; // websocked url地址
           
                this.websock = new WebSocket(wsuri);
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onclose = this.websocketclose;
                console.log('weosocket已连接')
            },
            websocketonopen() {  //连接建立之后执行send方法发送数据
                let actions = { 
                    "test": "12345"
                };
                this.websocketsend(JSON.stringify(actions));
                console.log('消息发送成功！')
            },
            websocketonerror() {  //连接建立失败重连
                console.log('weosocket连接建立失败')
                this.initWebSocket();
            },
            websocketonmessage(e) {  //数据接收
                console.log('weosocket数据接收')
                const redata = JSON.parse(e.data);
                console.log(redata)
            },
            websocketsend(Data) {  //数据发送
                this.websock.send(Data);
            },
            websocketclose(e) {  //关闭
                console.log('断开连接', e);
            },
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中使用WebSocket

export default { data(){ return { } }, created(){ thi

矫情吗；*/ 2023年01月03日 14:17/ 0 赞/ 197 阅读

相关 vue中使用websocket

一、websocket可以干什么对于前端工程师来说，一般是前端通过触发事件，主动发起请求来获取后台数据。但是特定情况下，需要后端服务器主动推送数据到前端。这时候普通的a

谁践踏了优雅/ 2022年12月22日 04:38/ 0 赞/ 212 阅读

相关 Vue中使用websocket(开箱即用)

<template> <div class="test"> </div> </template> <script>

淩亂°似流年/ 2022年12月03日 11:30/ 0 赞/ 148 阅读

相关 Vue中使用websocket的正确姿势

文章目录 1：首先谈谈websocket是什么？ 2: vue中怎么使用 3:websocket的属性讲解 WebSocket 对象作

小鱼儿/ 2022年12月03日 01:38/ 0 赞/ 195 阅读

相关 WebSocket vue

本文转载于[此篇博客][Link 1] 一、在utils目录下创建websocket.js文件 import { Message } from 'eleme

叁歲伎倆/ 2022年11月26日 03:59/ 0 赞/ 158 阅读

相关 js之websocket在vue项目中使用

websocket的大致作用：对于前端工程师来说，一般是前端通过触发事件，主动发起请求来获取后台数据。但是特定情况下，需要后端服务器主动推送数据到前端。这时候普通的a

素颜马尾好姑娘i/ 2022年10月23日 11:20/ 0 赞/ 214 阅读

相关怎样在Vue中使用websocket传输数据

简介 WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信

「爱情、让人受尽委屈。」/ 2022年09月03日 04:19/ 0 赞/ 279 阅读

相关 Java中使用webSocket

Java中使用webSocket package com.yaoqi.controller.message; import javax.web

r囧r小猫/ 2022年04月10日 11:29/ 0 赞/ 231 阅读

相关 vue使用websocket问题记录

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

ゞ浴缸里的玫瑰/ 2022年02月22日 11:03/ 0 赞/ 646 阅读

相关 vue中封装webSocket

在vue项目中，每个组件里使用webSocket比较简单，但是webSocket的使用是在整个项目中的时候呢，我们就需要封装成一个公共的文件； 1.新建一个 socket

ゝ一世哀愁。/ 2021年09月18日 09:00/ 0 赞/ 909 阅读