Vue-Socket.io的使用步骤

ゝ一世哀愁。 2022-12-28 16:20 718阅读 0赞

## 第一步安装依赖 ##

npm install vue-socket.io --save

### 第二步在main.js中引入 ###

import VueSocketio from 'vue-socket.io';
    import socketio from 'socket.io-client';
    Vue.use(
        new VueSocketio({
          debug: true ,   // debug调试，生产建议关闭
          connection: socketio(window.g.apiUrl),
        })
    )

**第三步在组件中使用推送消息给后台，连接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","客户端需要帮助了" );

接收服务端的信息

init(){
    
    //接收服务端的信息
        this.sockets.subscribe('testRoom', (data) => {
            console.log('接收的信息有：',data)
        })
    
    }

vuex的使用

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

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

[https_github.com_MetinSeylan_Vue-Socket.io]: https://github.com/MetinSeylan/Vue-Socket.io

发表评论取消回复

表情：

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

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

相关阅读

相关 swagger的使用与步骤

1、导入maven工程首先我们创建一个 Spring Boot 项目，并引入 Swagger3 的核心依赖包，如下： <dependency> <

清疚/ 2023年10月09日 21:41/ 0 赞/ 32 阅读

相关 MybatisPlus的使用步骤

MybatisPlus使用步骤 1.导入MybatisPlus坐标  <depe

小灰灰/ 2023年09月29日 19:20/ 0 赞/ 13 阅读

相关 session的使用步骤

1.安装 npm install express-session --save 2.在app.js中引入 var session=require("ex

待我称王封你为后i/ 2022年12月16日 13:11/ 0 赞/ 170 阅读

相关 Echarts --------使用步骤

方式1：模块化单文件引入 1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。 2、新建<script>标签引入模块化单文件e

落日映苍穹つ/ 2022年08月22日 14:29/ 0 赞/ 198 阅读

相关 HttpWatch使用步骤

HttpWatch是强大的网页数据分析工具.集成在Internet Explorer[工具栏][Link 1].包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字

骑猪看日落/ 2022年08月21日 13:46/ 0 赞/ 247 阅读

相关使用PopupWindow的实现步骤

第一步自定义.xml布局文件第二步获取LayoutInflater对象第三步调用inflate()方法获取View对象第四步创建PopupWindow对象

ゝ一纸荒年。/ 2022年06月16日 23:25/ 0 赞/ 216 阅读

相关 ssm整合使用的步骤

一、依赖的包必不可少（spring+springmvc+mybatis+他们整合需要的依赖包）二、分别配置他们的主配置文件 1、web.xml，2、springmvc

拼搏现实的明天。/ 2022年04月02日 08:47/ 0 赞/ 213 阅读

相关 Dubbo使用步骤

Dubbo使用步骤 SpringBoot方式第一步：引入依赖在服务提供者、消费者工程中的pom.xml文件中添加如下依赖 <!-- Dubbo

深碍√TFBOYSˉ_/ 2021年10月30日 01:08/ 0 赞/ 293 阅读

相关 nginx的使用步骤

nginx的使用 1. 下载nginx 在ajax调取官网接口数据时，会出现跨域的情况。这个时候如果想要获取到接口数据，则可以通过nginx解决跨域问题。

系统管理员/ 2021年07月25日 18:06/ 0 赞/ 421 阅读

相关使用JDBC的基本步骤

使用JDBC的基本步骤： > 语言：Java 1. 注册驱动： // 1. 注册驱动 DriverManager.registerDriver(n

秒速五厘米/ 2021年06月24日 16:10/ 0 赞/ 447 阅读