Vue-Socket.io的使用步骤

最新推荐文章于 2025-06-01 15:47:11 发布

lily2016n

最新推荐文章于 2025-06-01 15:47:11 发布

阅读量1.1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue学习 vue 文章标签： socket.io

本文链接：https://blog.csdn.net/lily2016n/article/details/102483090

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

vue学习

15 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成Socket.io实现实时通讯。步骤包括安装依赖、配置连接、使用推送消息、监听事件及整合Vuex状态管理。适用于前后端实时交互需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步安装依赖

npm install vue-socket.io --save

第二步在main.js中引入

import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
    debug: true,
    connection: 'http://metinseylan.com:1992',
    vuex: {
        store,
        actionPrefix: 'SOCKET_', //为vuex设置的两个前缀
        mutationPrefix: 'SOCKET_'
    },
    options: { path: "/my-app/" } //Optional options
}))

第三步，在组件中使用推送消息给后台，连接socket，

  sockets: {
    //查看socket是否渲染成功
    connect() {
      console.log("链接成功");
    },
    disconnect(){
      console.log("断开链接");
    },//检测socket断开链接 
    reconnect(){
      console.log("重新链接");
    },
    //客户端接收后台传输的socket事件
    message(data) {
      this.$notify({
        title: '新消息',
        message: data,
        type: 'warning',
        duration:10000
      });
      console.log("data", data);//接收的消息
    }
  },

客户端往服务端发消息

this.$socket.emit("register","客户端需要帮助了" );

vuex的使用

	state: {
	  message:''
	},
    mutations: {
        SOCKET_message:(state, data)=>{
           state.message = data;
        }
   }

详细讲解见官方github https://github.com/MetinSeylan/Vue-Socket.io

在这里插入图片描述