socket.io在vue的基本使用

项目地址：歪fChat

该项目的技术栈为：

前端：vue2 socket.io

后端：express socket.io

下面是具体操作步骤：

一、安装依赖并引入到项目中

前端：

1. 安装依赖

1.  
   npm i vue-socket.io -S
2.  
   npm i socket.io-client -S

2. 在main.js中引入

1.  
   import Vue from 'vue'
2.  
   import App from './App.vue'
3.  
    
4.  
   Vue.config.productionTip = false
5.  
    
6.  
   import VueSocketIO from 'vue-socket.io'
7.  
   import SocketIO from 'socket.io-client'
8.  
    
9.  
   const SOCKETIO = new VueSocketIO({
10.  
    debug: true, // true开启
11.  
    connection: SocketIO('ws://127.0.0.1:24000'), // 里面写socket服务器地址
12.  
    // 使用vuex
13.  
    vuex: {
14.  
    store,
15.  
    // 定义vuex函数的时候，用来区分普通函数还是socket函数。
16.  
    actionPrefix: 'SOCKET_',
17.  
    mutationPrefix: 'SOCKET_'
18.  
    },
19.  
    options: {
20.  
    autoConnect: false // 关闭自动连接，一般是在用户登录过后才进行手动连接
21.  
    }
22.  
    })
23.  
     
24.  
    Vue.use(SOCKETIO)
25.  
     
26.  
    new Vue({
27.  
    render: h => h(App),
28.  
    }).$mount('#app')

当debug开启后，控制台会有输出调试内容

注意：

1. connection: SocketIO('ws://127.0.0.1:24000')  ws://127.0.0.1:24000这个是后端提供的socket服务器地址

2. autoConnect: false 这是关闭自动连接，当用户登录后才进行手动连接，手动调用连接的方法为：this.$socket.connect() （后面会说到）

后端：

1. 安装依赖

1.  
   npm i express -S
2.  
   npm i socket.io -S

2. 引入socket

可以在官网上找到express服务器的使用方法

官网地址：https://socket.io/zh-CN/docs/v4/server-initialization/#with-express

 在项目的index.js中引入

1.  
   const express = require("express");
2.  
   const { createServer } = require("http");
3.  
   const { Server } = require("socket.io");
4.  
    
5.  
   const app = express();
6.  
   const httpServer = createServer(app);
7.  
   const io = new Server(httpServer, { /* options */ });
8.  
    
9.  
   io.on("connection", (socket) => {
10.  
    // 前端所有的事件都写在这里面
11.  
    // ...
12.  
    });
13.  
     
14.  
    httpServer.listen(24000, () => {
15.  
    console.log("🛰️ socket_server running at http://127.0.0.1:24000");
16.  
    });

 这是后端的项目目录

使用node index.js启动socket服务器

当后端项目启动后，可以去浏览器控制台查看连接情况，结果是不停的报错，客户端它会不断向服务器进行请求连接

 看到XMLHttpRequest和CORS，就知道是跨域了😂，看了网上说的需要在前端的vue.config.js中配置跨域代理，我试了一下是行不通的，依旧会报错，对于http请求跨域，后端也可以配置cors来解决，在socket中，可以通过配置项的方式来解决。

 配置下面代码即可解决跨域问题：

1.  
   const io = new Server(httpServer, {
2.  
   cors: {
3.  
   origin: '*'
4.  
   }
5.  
   });

当控制台不报红了，就可以开始下面的步骤了

二、使用socket

前端和后端对于socket的使用基本一致，通过socket.emit('事件名', 传递的参数)来触发事件，传递的参数可以是数组或对象（socket底层做了转字符串操作），通过socket.on('事件名', (data) => {})来接收参数。

前端：

1. 手动连接socket

可以通过 this.$socket.connect() 进行连接

我们可以在后端代码打印一下（注：socket会对每一个连接上的用户分配一个唯一的id）

 当我打开两个浏览器窗口时，后端就会输出连接上的用户id

 2. 后端为每一个连接上的用户派发事件

派发的事件名是自定义的，但不能使用socket内置的，比如connection（连接成功）、disconnect（断开连接）。

注意⚠️：前后端对同一个事件，触发和接收用的事件名必须一致

例：后端为每个连接上的用户派发welcome事件

1.  
   io.on("connection", (socket) => {
2.  
   console.log(socket.id, '连接成功');
3.  
   socket.emit('welcome', `欢迎${socket.id}连接`)
4.  
   });

注意：vue使用下面方法是监听不到事件的

1.  
   export default {
2.  
   mounted() {
3.  
   this.$socket.connect()
4.  
   // 错误方法
5.  
   this.$socket.on('welcome', (data) => {
6.  
   console.log(data);
7.  
   })
8.  
   }
9.  
   }

而是通过下面的方法来监听

1.  
   export default {
2.  
   mounted() {
3.  
   this.$socket.connect()
4.  
   },
5.  
   sockets: {
6.  
   // 事件名，参数为后端传递的数据
7.  
   welcome(data) {
8.  
   console.log(data);
9.  
   }
10.  
    }
11.  
    }

当连接上的用户则会输出下面的内容

前端通过 this.$socket.emit('事件名', 传递的数据)

下面以login事件为例：

1.  
   mounted() {
2.  
   this.$socket.connect()
3.  
   this.$socket.emit('login', '我是前端，我连接上了')
4.  
   },

1.  
   io.on("connection", (socket) => {
2.  
   console.log(socket.id, '连接成功');
3.  
   socket.emit('welcome', `欢迎${socket.id}连接`)
4.  
   // 接收login事件
5.  
   socket.on('login', (data) => {
6.  
   console.log(data);
7.  
   })
8.  
   });

打印下data

socket实现群聊和私聊https://blog.csdn.net/m0_65519288/article/details/131031942?spm=1001.2014.3001.5501

这篇好文章是转载于：学新通技术网