socket.io在vue的基本使用

对于上一篇内容，没有说到socket的基本使用，这篇文章说说socket.io在前端和后端的使用。

项目地址：歪fChat

该项目的技术栈为：

前端：vue2 + socket.io

后端：express + socket.io

下面是具体操作步骤：

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

前端：

1. 安装依赖

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

2. 在main.js中引入

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
 
const SOCKETIO = new VueSocketIO({
  debug: true, // true开启
  connection: SocketIO('ws://127.0.0.1:24000'), // 里面写socket服务器地址
  // 使用vuex
  vuex: {
    store,
    // 定义vuex函数的时候，用来区分普通函数还是socket函数。
    actionPrefix: 'SOCKET_',
    mutationPrefix: 'SOCKET_'
  },
  options: {
    autoConnect: false // 关闭自动连接，一般是在用户登录过后才进行手动连接
  }
})
 
Vue.use(SOCKETIO)

new Vue({
  render: h => h(App),
}).$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. 安装依赖

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

2. 引入socket

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

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

 在项目的index.js中引入

const express = require("express");
const { createServer } = require("http");
const { Server } = require("socket.io");

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, { /* options */ });

io.on("connection", (socket) => {
    // 前端所有的事件都写在这里面
    // ...
});

httpServer.listen(24000, () => {
    console.log("🛰️ socket_server running at http://127.0.0.1:24000");
});

 这是后端的项目目录

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

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

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

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

const io = new Server(httpServer, {
    cors: {
        origin: '*'
    }
});

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

二、使用socket

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

前端：

1. 手动连接socket

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

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

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

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

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

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

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

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

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

export default {
  mounted() {
    this.$socket.connect()
    // 错误方法
    this.$socket.on('welcome', (data) => {
      console.log(data);
    })
  }
}

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

export default {
  mounted() {
    this.$socket.connect()
  },
  sockets: {
    // 事件名，参数为后端传递的数据
    welcome(data) {
      console.log(data);
    }
  }
}

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

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

下面以login事件为例：

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

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

打印下data

 根据上面内容，socket的基本使用就这些，想要实现私聊和群聊，可以去看看我的上一篇文章😂

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