在vue3.0项目中使用WebSock,进行长链接

最新推荐文章于 2024-04-27 08:21:03 发布

maoxiaozhu

最新推荐文章于 2024-04-27 08:21:03 发布

阅读量526

点赞数

文章标签： javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/maoxiaozhu/article/details/131686271

版权

vue3.0+vite+javascript开发的项目,需要注意的是获取环境变量的方法:import.meta.env

<script setup>
import {reactive,onMounted} from 'vue'
onMounted(() => {
   initWebSocket();
});
let webSock = reactive(null);
const lockReconnect = ref(false);
const initWebSocket = () => {
  let userId = sessionStorage.getItem("userId");
  let groupId = sessionStorage.getItem("groupId");
  let token = sessionStorage.getItem("webSock_token");
  let websocketUrl = import.meta.env.VITE_WEBSOCK_URL //
  // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
  webSock = new WebSocket(websocketUrl);
  webSock.onopen = webSocketOnOpen;
  webSock.onerror = webSocketOnError;

  webSock.onmessage = webSocketOnMessage;
  // webSock.onclose = webSocketClose;
};
const webSocketOnOpen = () => {
  console.log("WebSocket连接