vue中封装webSocket

ゝ一世哀愁。 2021-09-18 09:00 926阅读 0赞

在vue项目中，每个组件里使用webSocket比较简单，但是webSocket的使用是在整个项目中的时候呢，

我们就需要封装成一个公共的文件；

1.新建一个 socket.js 文件

var websock = null;  
var global\_callback = null;  
var serverPort = '5000';    //webSocket连接端口  
   
   
function getWebIP()\{  
    var curIP = window.location.hostname;  
    return curIP;  
\}  
   
function initWebSocket()\{ //初始化weosocket  
    //ws地址  
    var wsuri = "ws://" +getWebIP()+ ":" + serverPort;  
    websock = new WebSocket(wsuri);  
    websock.onmessage = function(e)\{  
        websocketonmessage(e);  
    \}   
    websock.onclose = function(e)\{  
        websocketclose(e);  
    \}  
    websock.onopen = function () \{  
        websocketOpen();  
    \}  
      
    //连接发生错误的回调方法  
    websock.onerror = function () \{  
        console.log("WebSocket连接发生错误");  
    \}  
\}  
   
// 实际调用的方法  
function sendSock(agentData,callback)\{    
    global\_callback = callback;  
    if (websock.readyState === websock.OPEN) \{  
        //若是ws开启状态  
        websocketsend(agentData)  
    \}else if (websock.readyState === websock.CONNECTING) \{  
        // 若是 正在开启状态，则等待1s后重新调用  
        setTimeout(function () \{  
            sendSock(agentData,callback);  
        \}, 1000);  
    \}else \{  
        // 若未开启 ，则等待1s后重新调用  
        setTimeout(function () \{  
            sendSock(agentData,callback);  
        \}, 1000);  
    \}  
\}  
   
//数据接收  
function websocketonmessage(e)\{   
    global\_callback(JSON.parse(e.data));  
\}  
   
//数据发送  
function websocketsend(agentData)\{  
    websock.send(JSON.stringify(agentData));  
\}  
   
//关闭  
function websocketclose(e)\{    
    console.log("connection closed (" + e.code + ")");  
\}  
   
function websocketOpen(e)\{  
    console.log("连接成功");  
\}  
   
initWebSocket();  
   
export\{sendSock\}  
2.在main.js中引入这个文件

//WebSocket封装方法  
import \* as socketApi from './api/socket'  
Vue.prototype.socketApi = socketApi

3.使用

this.socketApi.sendSock(agentData,this.getConfigResult);   【agentData：发送的参数；this.getConfigResult：回调方法】

4.文件目录说明  
原文：https://blog.csdn.net/qq\_39186346/article/details/81941664

发表评论取消回复

表情：

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

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

相关阅读

相关基于Vue3封装一个好用的Websocket

在Vue3中使用Websocket可以让我们轻松地实现实时数据传输。为了方便使用，我们可以封装一个好用的Websocket类。安装依赖首先我们需要安装 `ws` 库

女爷i/ 2023年09月25日 23:33/ 0 赞/ 51 阅读

相关 Vue中API封装

实现功能接口api化请求自动绑定防止重复提交 API封装 1、src目录下新建api文件夹 index.js ---- 接口总路由 /

阳光穿透心脏的1/2处/ 2023年02月20日 13:38/ 0 赞/ 24 阅读

相关 vue中使用WebSocket

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

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

相关 vue 中封装axios

vue 中封装axios /api/index.js文件 import axios from "axios"; import router from "..

傷城~/ 2023年01月01日 03:54/ 0 赞/ 281 阅读

相关 vue中使用websocket

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

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

相关 websocket demo，websocket封装，jquery下的websocket封装

一、websocket封装github地址：https://github.com/yquanmei/websocket-demo。二、需求最近公司要求加入webso

傷城~/ 2022年05月12日 11:22/ 0 赞/ 244 阅读

相关 vue中封装webSocket

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

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

相关 vue中封装echart

以下是模板，不同的echart需要替换option中的内容 LineChart.vue <template> <div :class="classNa

落日映苍穹つ/ 2021年07月26日 12:43/ 0 赞/ 504 阅读

相关 vue 中封装loading

全局注册 Vue.prototype.myLoading = function () { const loading = this.$loading({

桃扇骨/ 2021年07月26日 02:56/ 0 赞/ 432 阅读

相关 Vue - Vue中动画封装

Vue中动画封装一 . css动画的封装二 . js动画的封装一 . css动画的封装 1. 动画封装模板组件定义设置：（1）

川长思鸟来/ 2021年07月25日 15:29/ 0 赞/ 439 阅读