Vue3(2)：Vue3使用socket.io

Vue3使用socket.io

今天想使用 eggjs 和 vue3 搭建一个简单地聊天平台，发现普遍用的是 socket.io (其实是 eggjs 的 websocket 在 github 第一个项目就是 socket.io) ,而且 socket.io 和 websocket 并不相通

socket.io 和 wesocket 有点区别，区别大家可以点击下边连接了解下

websocket和socket.io区别

eggjs使用 socket.io

socket.io的GitHub

这边写个简单demo，以后如果有时间会写个聊天系统出来

修改 router.js 文件，添加 socket.io

// router.js
const { router, controller, middleware, io } = app;
// 订阅chat
io.of('/').route('chat', controller.chat.onChat);
1
2
3
4

新建 app=>controller => chat.js

一个很简单的 demo ，主要就是收到 chat 的信息返回给 res

'use strict';

const Controller = require('egg').Controller;

class ChatController extends Controller {
  async onChat(res) {
    const { ctx } = this;
    const { id } = ctx.socket;
    const message = this.ctx.args[0];
    // 发送个 res
    await this.ctx.socket.emit('res', `Hi! I've got your message: ${message}`);
  }
}
module.exports = ChatController;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Vue3 使用 socket.io

然后发现 Vue3 也有个 socket.io ，然后发现 socket.io 虽然已经适配了 Vue3 但是用了就报错…

Vue.socket.io 的 使用方法

然后我去下载代码，然后自己也 folk 了一个版本

我的 Vue.socket.io

现在就可以直接用了，我把代码改成通过 inject 和 provide 的注入实现

使用方法

下载依赖

npm install vue-socket-kevin.io
1

修改 main.js

import VueSocketIO from 'vue-socket-kevin.io';

const socket = new VueSocketIO({
  debug: true,
  // 方法可以参考 https://github.com/MetinSeylan/Vue-Socket.io
  connection: 'http://127.0.0.1:7001',
});
1
2
3
4
5
6
7

修改 App.vue

由于使用的是 inject 和 provide ，所以必须在 数据初始化后使用 ， 也就是 onBeforeMount后使用

<script setup>
import { inject ,onMounted } from 'vue';
const socket = inject('socket');
onBeforeMount(() => {
    socket.subscribe('connect',()=>{
        console.log('you are connect')
    })
})
</script>
1
2
3
4
5
6
7
8
9

效果

看到 you are connect 证明已经连接成功 ,

然后我们写的发送的代码

修改 App.vue

<script setup>
import { inject ,onBeforeMount , onMounted } from 'vue';
const socket = inject('socket');
onBeforeMount(() => {
    socket.subscribe('connect',()=>{
        console.log('you are connect')
    })
    // 消息订阅
    socket.subscribe('res',(data)=>{
        console.log('我收到你的消息啦！！',data)
    })
});
onMounted(()=>{
   // 上面说个 我们发送 chat 的信息频道，后台就会放回 res 频道的信息给我们
    socket.emit("chat","good")
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

结果

这样就代表成功了，具体的 api 还是查看 Vue.socket.io 的 使用方法

如果有问题可以直接私聊或者通过信息回复我

例外

其实 Vue3 和 egg.js 也有 websocket，但是其实如果你去查看源码，会发现 websocket插件 其实就是简单通过 js 的 websocket 和 发布订阅模式 去实现的

这里提供两个大佬写的有关于 egg.js 和 Vue3 的 websocket

Vue3的websocket

eggjs的websocket

更新

暂无