vue 使用 socket 实现即时通讯_c# vue socket

安装依赖

npm install -S vue-socket.io
1

main.js 引用

import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({
  // 控制台调试 console.log
  debug: true,
  // 连接地址 后端提供
  connection: 'http://localhost:3000',
  // vuex，不需要则不加
  vuex: {
    store,
    mutationPrefix: "SOCKET_",
    actionPrefix: "SOCKET_"
  }
}))
1
2
3
4
5
6
7
8
9
10
11
12
13
14

页面使用

• 在 data、mounted、methods 同级加上 sockets 对象

sockets: {
  // 链接成功
  connect(data) {
    console.log(data)
  },
  // 发送消息
  toServer(data) {
    this.$socket.emit('toServer', data)
  },
  // 接收消息
  toClient(data) {
    this.msgList.push(data)
  },
  // 断开链接回调
  disconnect() {
    console.log('disconnect：', '已经断开 socket 链接')
  },
  // 重新连接
  reconnect() {
    // 自动执行，直到链接成功
    this.$socket.emit('connect')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

服务端代码 （ node.js 为例 ）

'use strict'
const http = require('http')
const app = http.createServer(function (req, res) {
  res.end(data)
})
const io = require('socket.io')(app)

// 3.建立链接
io.on('connection', function (socket) {
  // 服务器获取客户端发送的数据
  socket.on('toServer', function (data) {
    console.log(data)
    socket.emit('toClient', '我是服务器的数据')
  })
})

/**
 * 以下是服务器给客户端发送数据的两种方式
 * 1, socket.emit()=>谁给我发信息我把信息发送给谁
 * 2, io.emit()=>群发给所有连接服务器的客户都广播数据
 */

app.listen(3000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23