1. 使用node搭建socket服务器
// 加载 express
const express = require('express')
// 加载 socket.io
const socketIo = require('socket.io')
// 加载 http
const http = require('http')
// 创建 app
const app = express()
// 创建 server
const server = http.createServer(app)
// 创建 sokcet
const io = socketIo(server)
// 保存用户
const users = []
// 当客户端连接时
io.on('connection', socket => {
console.log('client is connect')
// 注册登录事件
socket.on('login', users => {
console.log(users)
// 发布登录成功事件 并发送消息
socket.emit('loginSucess', '登录成功')
})
})
// 监听端口
server.listen(8989, () => {
console.log('Server is running……')
})
2. 在Vue中使用socket.io
2.1 使用npm下载socket.io
npm install --save socket.io-client
2.2 在项目中引用
创建一个js文件并将此文件引入到项目的main.js文件中
// 引入 socket.io
import socketio from 'socket.io-client'
// 连接服务器
const io = socketio('http://127.0.0.1:8989')
export default io
在main.js 中引入创建的文件,并将其定义到vue的原型中, 即可通过this.$sockets 调用socket
import socketio from './socket'
Vue.prototype.$sockets = socketio
2.3 在项目中使用
向服务器发布事件,通过this.$sockets.emit('evts', ...args)
向服务器订阅事件, 通过this.$sockets.on('evts', callback) 订阅事件