撸一个聊天室(vue+koa2+websokect+mongodb)

撸一个聊天室(vue+koa2+websokect+mongodb)

本篇博客主要介绍聊天室项目，作者学习vue和node时间较短，若有什么错误或建议，欢迎指出，谢谢~


贴上源码链接 -> 源码

vue的布局在这就不说了，大家可以查看源码。

效果图如下：


首先来看一个聊天室需要哪些功能：

1. 发消息（单聊）
2. 添加好友
3. 发表情和图片
4. 发文件

这三个算是聊天室需要的最基本的功能，其他功能还可以自己拓展，在我的源码中还实现了离线消息、禁止多端登录以及富文本功能。首先需要了解的是如何在vue中使用webSocket。

// 在vue中使用webSocket，需要使用vue-socket.io
// 下载
npm i vue-socket.io -D

// main.js
import VueSocketio from 'vue-socket.io'
Vue.use(VueSocketio, 'http://localhost:8888/') // 第二个参数为服务端地址

// 在vue中定义socket属性
sockets: {
    // 不能改
  // 定义服务端需要调用的方法
  getOnlineNum: function (num) {
   
    this.onlineNum = num
  }
}

// 调用方法
this.$socket.emit('signIn', 'username')

服务端使用的是koa2 + socket.io

const app = new Koa()

const server = require('http').createServer(app.callback())
const io = require('socket.io')(server)
server.listen(process.env.PORT) // 监听端口号

// socket
// 每个用户登录时，将他们的用户名和socketID通过键值对存起来，方便单聊时向指定用户发送
// 通过用户获取socketID，通过socketID获取用户名
let user = {
   } // 键值对：username: socketID
let socketID = {
   } // 键值对： socketID: username

// socket连接
io.on('connection', function (socket) {
   
  // 注册signIn方法，在vue登录时调用
  socket.on('signIn', function (username) {
   
    user[username] = socket.id
    socketID[socket.id] = username
    // 获取当前在线人数
    io.sockets.emit('getOnlineNum', Object.keys(socketID).length)
  })
  // 断开连接
  socket.on('disconnect', function () {
   
    const username = socketID[socket.id] // 获取下线的用户
    delete socketID[socket.id]
    delete user[username]
    io.sockets.emit('getOnlineNum', Object.keys(socketID).length)
    console.log(username + '下线')
  })
})

其实webSocket的用法就是在双向调用，客户端注册服务端要调用的方法，服务端注册客户端要调用的方法。

实现单聊

编写单聊功能时需要注意，需要给输入框绑定当前聊天好友的消息变量，没有好友时单独绑定一个变量。

<textarea v-if="friends.length>0" @keyup.enter="send()" v-model="friends[nowChat].textmsg"></textarea>
<textarea v-else @keyup.enter="send(textmsg)" v-model="textmsg"></textarea>

// 点击发送按钮
send () {
   
  // 判断是否有好友
  if (this.friends.length > 0) {
   
    // 参数：1.方法名，2.消息，3.来自哪个用户，4.发送给哪个用户
    this.$socket.emit('receive', this.friends[this.nowChat].textmsg, this.curUsername, this.friends[this.nowChat].username)
  } else {
   
    alert('你还没有好友，先去加好友吧')
  }
}

// 服务端接收
socket.on('receive', function (msg, from, to) {
   
  let date = new Date().toTimeString().substr(0, 8) // 记录时间
  let socketId = user[to] // 查找接收方的socketID
  let meSocketId = user[from] // 查找发送方的socketID
  // 给自己发送一条
  io.sockets.sockets[meSocketId].emit('newMsg', {
   from: