用socket做一个聊天室

socket 是什么

socket是一个抽象层，是一个组合的api ，应用程序可以通过它发送或接收数据，可对其进行像对文件一样的打开、读写和关闭等操作。socket允许应用程序将I/O插入到网络中，并与网络中的其他应用程序进行通信。单聊其实就是实现端到服务器，再有服务器发送给另一端进行通信。

服务端相关逻辑的代码如下:

let socketio = {};
let sqlQuery = require("./module/XZJMysql");

function getSocket(server) {
  socketio.io = require("socket.io")(server);
  let io = socketio.io;

  io.on("connection", function (socket) {
    //服务器端接手登录时间
    socket.on("login", async function (data) {
      //先判断是否已经有人在登录，如果有人登录的话，那么将其断开连接
      let sqlStr1 = "select * from user where isonline = ? and username = ?";
      let result1 = await sqlQuery(sqlStr1, ["true", data.username]);
      if (result1.length > 0) {
        socket
          .to(result1[0].socketid)
          .emit("logout", { content: "有人登录进来，强制将你踢出去！" });
      }
      //接收登录事件
      let sql = "update user set socketid=?,isonline=? where username =?";
      let result = await sqlQuery(sql, [socket.id, "true", data.username]);
      socket.emit("login", {
        state: "ok",
        content: "登陆成功",
      });
       //某用户上线之后获取最新的未读消息
       let strSql3 ="select * from chatMsg where isRead=? and `to`=?";
       let result3 =await sqlQuery(strSql3,['false',data.username]) 
       socket.emit('unReadMsg', Array.from(result3))
      //断开连接
      socket.on("disconnect", async function () {
        //修改数据库登录信息（socketid,isonline）
        let sqlStr = "update user set socketid=?,isonline=? where socketid =?";
        let result = await sqlQuery(sqlStr, [null, null, socket.id]);
      });
      //获取所有好友列表
      socket.on("users", async function(){
          let sqlStr1 = "select * from user";
          let result1 = await sqlQuery(sqlStr1)
          socket.emit("users",Array.from(result1))
      });
      //发送消息
      socket.on("sendMsg", async function(msg){
        //查询这个人在不在线
        let strSql = 'select * from user where username=? and isonline = ?';
        let result = await sqlQuery(strSql,[msg.to.username,'true']);
        if(result.length>0){
          //如果这个人在线， 那么直接发消息 并且将聊天内容放到数据库中
          let toid = result[0].socketid;
          socket.to(toid).emit('readMsg',msg)
         
          let strSql1 = "insert into chatmsg (`from`,`to`,`content`,`time`,isRead) VALUES(?,?,?,?,?)";
          sqlQuery(strSql1,[msg.from.username,msg.to.username,msg.content,msg.time,'true'])
        
        }else{
          let strSql1 = "insert into chatmsg (`from`,`to`,`content`,`time`,isRead) VALUES(?,?,?,?,?)";
          sqlQuery(strSql1,[msg.from.username,msg.to.username,msg.content,msg.time,'false'])
        }
      })
      //监听已读消息
      socket.on('readMsg',async function(data){
        let strSql = "UPDATe chatmsg SET isRead=? where `from` =? and `to` = ?";
        let result = await sqlQuery(strSql,['true',data.from,data.self])
      })
        //加入群
      // 1 首先获取所有的群 
      let strSql = "select * from user where isgroup = ?";
      let result4 = await sqlQuery(strSql,['true'])
      Array.from(result4).forEach((item,index)=>{
          socket.join(item.socketid)
        })
    });

  });
}

socketio.getSocket = getSocket;

module.exports = socketio;

前端使用的vue，在生命周期函数   beforeMount() 方法中去请求后端接口数据。获取数据后在挂载后进行进行相关操作

单聊界面:这个界面显示所有的好友 点击之后进行聊天界面（chat-input）

聊天界面: