vue前端websocket的配置转发

最新推荐文章于 2024-08-27 10:52:38 发布

原创最新推荐文章于 2024-08-27 10:52:38 发布 · 2.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #websocket #vue.js

这篇博客介绍了WebSocket的配置方法，包括在配置文件中设置目标地址、启用WebSocket和路径重写。在Vue文件中，详细展示了如何初始化WebSocket连接，处理消息接收、关闭及错误事件，并提供了WebSocket连接创建的逻辑。博客还指出了一种可能导致创建多个连接的错误情况。

首先是配置文件

'/socket': {
   target: 'http://192.168.0.12:8086',
   ws: true,
   changeOrigin: true,
   pathRewrite: {
      '^/socket': '/'
   }
 }

然后是在vue文件中的使用

var websock = null;

var global_callback = null;
//var serverPort = "8086"; // webSocket连接端口
//var wsuri = "ws:" + window.location.hostname + ":" + serverPort+'/socket/websocket';
//var wsuri = "ws://192.168.0.12:8086/websocket";

var wsuri = "ws:" + window.location.host+'/socket/websocket';
function createWebSocket(callback) {

  if (websock == null || typeof websock !== WebSocket) {
    initWebSocket(callback);
  } 
}

function initWebSocket(callback) {
  global_callback = callback;
  // 初始化websocket
  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连接发生错误");
     //createWebSocket();啊，发现这样写会创建多个连接，加延时也不行
  };
}