当前位置:首页 » 《资源分享》 » 正文

Vue2和Vue3中使用WebSocker-封装

24 人参与  2024年09月30日 08:42  分类 : 《资源分享》  评论

点击全文阅读


在Vue.js中实现WebSocket的封装通常需要创建一个单独的模块或插件,以便在整个应用中使用WebSocket。下面是一个简单的例子,演示如何在Vue.js中封装WebSocket:

首先,你可以创建一个名为WebSocketPlugin.js的文件,其中包含WebSocket的封装代码:

// WebSocketPlugin.jsconst WebSocketPlugin = {  install(Vue) {    const socket = new WebSocket('ws://your-socket-server-url');    socket.onopen = () => {      console.log('WebSocket连接已打开');    };    socket.onmessage = event => {      console.log('收到消息:', event.data);      Vue.prototype.$socket.$emit('message', event.data);    };    socket.onclose = () => {      console.log('WebSocket连接已关闭');      // 可以在此处理连接关闭的逻辑,例如尝试重新连接    };    Vue.prototype.$socket = socket;  },};export default WebSocketPlugin;

例子中,我们创建了一个WebSocket实例,并在Vue插件中定义了一些生命周期事件的处理程序。我们使用Vue的$emit方法将收到的消息传递给Vue组件。

然后,在Vue应用的入口文件(通常是main.js)中使用该插件:

// main.jsimport Vue from 'vue';import App from './App.vue';import WebSocketPlugin from './WebSocketPlugin';Vue.use(WebSocketPlugin);new Vue({  render: h => h(App),}).$mount('#app');

现在,在Vue组件中,你可以通过this.$socket来访问WebSocket实例。例如,在一个组件中,你可以使用以下方式:

// YourComponent.vueexport default {  mounted() {    // 发送消息    this.$socket.send('Hello WebSocket!');    // 监听消息    this.$socket.addEventListener('message', event => {      console.log('收到消息:', event.data);    });  },};

完善

Vue 2 中封装 WebSocket 时,同样可以考虑加入断线重连、错误处理和自定义事件等功能。以下是一个相应的例子: 

// WebSocketPlugin.jsconst WebSocketPlugin = {  install(Vue, options = {}) {    const socketUrl = options.url || 'ws://your-socket-server-url';    const reconnectInterval = options.reconnectInterval || 3000; // 重连间隔时间,单位毫秒    const maxReconnectAttempts = options.maxReconnectAttempts || null; // 最大重连尝试次数,null 表示无限尝试    let socket;    let isConnected = false;    let reconnectAttempts = 0;    const connect = () => {      socket = new WebSocket(socketUrl);      socket.onopen = () => {        console.log('WebSocket连接已打开');        isConnected = true;        reconnectAttempts = 0;      };      socket.onmessage = (event) => {        console.log('收到消息:', event.data);        Vue.prototype.$socket.$emit('message', event.data);      };      socket.onclose = (event) => {        console.log('WebSocket连接已关闭', event);        isConnected = false;        if (          maxReconnectAttempts === null ||          reconnectAttempts < maxReconnectAttempts        ) {          setTimeout(() => {            console.log('尝试重连...');            reconnectAttempts++;            connect();          }, reconnectInterval);        }      };      socket.onerror = (error) => {        console.error('WebSocket发生错误', error);        Vue.prototype.$socket.$emit('error', error);      };    };    Vue.prototype.$socket = {      send(message) {        if (socket && socket.readyState === WebSocket.OPEN) {          socket.send(message);        }      },      isConnected() {        return isConnected;      },    };    connect();  },};export default WebSocketPlugin;

在这个例子中,与 Vue 3 不同,Vue 2 使用 Vue.prototype 来添加全局属性。同样,我添加了断线重连、错误处理和自定义事件的功能。

在你的 Vue 2 应用中,你可以像下面这样使用这个插件:

// main.jsimport Vue from 'vue';import App from './App.vue';import WebSocketPlugin from './WebSocketPlugin';Vue.use(WebSocketPlugin, {  url: 'ws://your-socket-server-url',  reconnectInterval: 3000,  maxReconnectAttempts: 5,});new Vue({  render: (h) => h(App),}).$mount('#app');

然后,你可以在你的组件中通过 this.$socket 来使用 WebSocket 功能:

// YourComponent.vueexport default {  mounted() {    // 发送消息    this.$socket.send('Hello WebSocket!');    // 监听消息    this.$socket.addEventListener('message', (data) => {      console.log('收到消息:', data);    });    // 监听自定义事件    // this.$socket.addEventListener('customMessage', (data) => {    //   console.log('自定义事件 - 收到消息:', data);    // });    // 监听错误事件    // this.$socket.addEventListener('error', (error) => {    //   console.error('WebSocket错误事件:', error);    // });  },};

在Vue 3 中,封装 WebSocket 的方式与 Vue 2 有些许不同。Vue 3 使用了 Composition API,你可以使用 refwatch 等功能来创建 WebSocket 的封装。以下是一个简单的例子:

首先,创建一个名为 useWebSocket.js 的文件:

// useWebSocket.jsimport { ref, onMounted, onBeforeUnmount } from 'vue';const useWebSocket = (url) => {  const socket = ref(null);  const connect = () => {    socket.value = new WebSocket(url);    socket.value.addEventListener('open', () => {      console.log('WebSocket连接已打开');    });    socket.value.addEventListener('message', (event) => {      console.log('收到消息:', event.data);    });    socket.value.addEventListener('close', () => {      console.log('WebSocket连接已关闭');      // 可以在此处理连接关闭的逻辑,例如尝试重新连接    });  };  const sendMessage = (message) => {    if (socket.value && socket.value.readyState === WebSocket.OPEN) {      socket.value.send(message);    }  };  onMounted(() => {    connect();  });  onBeforeUnmount(() => {    if (socket.value) {      socket.value.close();    }  });  return {    socket,    sendMessage,  };};export default useWebSocket;

然后,在你的 Vue 组件中使用这个封装:

// YourComponent.vueimport { ref, onMounted } from 'vue';import useWebSocket from './useWebSocket';export default {  setup() {    const message = ref('');    const { socket, sendMessage } = useWebSocket('ws://your-socket-server-url');    onMounted(() => {      // 发送消息      sendMessage('Hello WebSocket!');    });    return {      message,      socket,    };  },};

在这个例子中,我们创建了一个 useWebSocket 的函数,它返回一个包含 WebSocket 连接和发送消息功能的对象。在组件中,我们使用 setup 函数来调用 useWebSocket 函数,并在 onMounted 生命周期钩子中发送了一条消息。

完善

封装 WebSocket 时,可以考虑加入断线重连、错误处理和自定义事件等功能。以下是一个更完善的例子:

// useWebSocket.jsimport { ref, onMounted, onBeforeUnmount, watchEffect, computed } from 'vue';const useWebSocket = (url, options = {}) => {  const socket = ref(null);  const isConnected = ref(false);  const reconnectInterval = options.reconnectInterval || 3000; // 重连间隔时间,单位毫秒  const maxReconnectAttempts = options.maxReconnectAttempts || null; // 最大重连尝试次数,null 表示无限尝试  let reconnectAttempts = 0;  const connect = () => {    socket.value = new WebSocket(url);    socket.value.addEventListener('open', () => {      console.log('WebSocket连接已打开');      isConnected.value = true;      reconnectAttempts = 0;    });    socket.value.addEventListener('message', (event) => {      console.log('收到消息:', event.data);      // 可以触发自定义事件      // emit('customMessage', event.data);    });    socket.value.addEventListener('close', (event) => {      console.log('WebSocket连接已关闭', event);      isConnected.value = false;      if (        maxReconnectAttempts === null ||        reconnectAttempts < maxReconnectAttempts      ) {        setTimeout(() => {          console.log('尝试重连...');          reconnectAttempts++;          connect();        }, reconnectInterval);      }    });    socket.value.addEventListener('error', (error) => {      console.error('WebSocket发生错误', error);      // 可以触发自定义错误事件      // emit('customError', error);    });  };  const sendMessage = (message) => {    if (socket.value && socket.value.readyState === WebSocket.OPEN) {      socket.value.send(message);    }  };  onMounted(() => {    connect();  });  onBeforeUnmount(() => {    if (socket.value) {      socket.value.close();    }  });  return {    socket,    isConnected,    sendMessage,  };};export default useWebSocket;

在这个例子中,我添加了以下改进:

使用 isConnected ref 来追踪 WebSocket 的连接状态。添加了断线重连功能,通过设置 reconnectIntervalmaxReconnectAttempts 参数来控制重连的间隔和尝试次数。添加了错误处理功能,可以触发自定义的错误事件。可以通过自定义事件触发消息的处理,具体可以根据需求进一步扩展。

在你的组件中,你可以这样使用:

// YourComponent.vueimport { ref, onMounted } from 'vue';import useWebSocket from './useWebSocket';export default {  setup() {    const message = ref('');    const { socket, isConnected, sendMessage } = useWebSocket(      'ws://your-socket-server-url',      {        reconnectInterval: 3000,        maxReconnectAttempts: 5,      }    );    // 监听自定义事件    // watchEffect(() => {    //   socket.value?.addEventListener('customMessage', (data) => {    //     console.log('自定义事件 - 收到消息:', data);    //   });    // });    // 监听自定义错误事件    // watchEffect(() => {    //   socket.value?.addEventListener('customError', (error) => {    //     console.error('自定义错误事件:', error);    //   });    // });    onMounted(() => {      // 发送消息      sendMessage('Hello WebSocket!');    });    return {      message,      isConnected,      socket,    };  },};


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/166471.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1