Vue+node 搭建聊天室

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) 订阅事件