socket.io多人聊天

後端代碼

module.exports = (io) => {
  const userInfo = {}

  io.on('connection', (socket) => {
    console.log('建立鏈接')
    //加入群聊，显示人数，
    socket.on('join', (data) => {
      socket.name = data.name
      userInfo[data.name] = socket.id

      //广播消息  除了发件人之外的所有连接的客户端
      socket.broadcast.emit('welcome', {
        name: data.name,
        num: Object.keys(userInfo).length,
      })
      console.log(userInfo)
      //欢迎加入群聊，也广播一下自己
      socket.emit('welcome', {
        name: data.name,
        num: Object.keys(userInfo).length,
      })
    })

    //接收前端发送的消息

    socket.on('message', (data) => {
      //广播消息  除了发件人之外的所有连接的客户端
      socket.broadcast.emit('gpmsg', data)
    })
    //用户离开
    socket.on('disconnect', (data) => {
      let name = socket.name

      if (userInfo[name]) {
        delete userInfo[name]
        socket.broadcast.emit('quit', {
          name,
          num: Object.keys(userInfo).length,
        })
      }
    })
  })
}

前端代碼

<template>
  <div class="home">
    <div class="count">在线人数{{num}}</div>
    <div class="content">
      <li v-for="(item, index) in list" :key="index" :class="item.right?'right':''">
        <template v-if='item.right'>
          <span class="msg" v-if="item.msg">{{item.msg}}</span>
          <el-avatar size="small" :src="circleUrl" v-if="item.name"></el-avatar>
        </template>
        <template v-else>
          <el-avatar size="small" v-if="item.name" :src="circleUrl"></el-avatar>
          <div class="name-con">
            <span class="name" v-if="item.name">{{item.name}}：</span>
            <span class="msg">{{item.msg}}</span>
          </div>
        </template>
      </li>
    </div>
    <div class="send">
      <el-row :gutter="10">
        <el-col :span="21">
          <el-input v-model="message" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="send">发送</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>


export default {
  name: 'Home',
  data: function () {
    return {

      list: [

      ],
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      message: '',
      num: 0,
      nickName: ''
    }
  },
  components: {

  },
  mounted() {
    let name = this.$route.query.name;
    if (!name) {
      this.$router.replace('/')
    }
    this.nickName = name
    this.join();
    this.welcomeJoin();
    this.getMsg();
    this.signout();
  },
  methods: {
    //发送数据
    send() {

      if (this.message.length > 0) {
        //先把自己发送的信息静态渲染一边
        let clientData = { name: this.nickName, msg: this.message, right: true }
        //然后再到服务端去广播信息
        let serverData1 = { name: this.nickName, msg: this.message }
        this.list.push(clientData)
        this.socket.emit('message', serverData1)
        this.message = ''
      }
    },

    //加入群聊
    join() {
      this.socket.emit('join', { name: this.nickName })
    },
    //接收加入群聊的广播
    welcomeJoin() {
      this.socket.on('welcome', data => {
        console.log(data);
        this.num = data.num;
        let msg = { msg: `欢迎${data.name}加入群聊` }
        this.list.push(msg)
      })
    },
    //接收消息
    getMsg() {
      //   this.sockets.subscribe('gpmsg', data => {
      //     console.log(data);
      //     this.list.push(data)
      //   })
      this.socket.on('gpmsg', data => {
        console.log(data);
        this.list.push(data)
      })
    },
    //退出广播
    signout() {
      this.socket.on('quit', data => {
        console.log(data, '退出');
        this.num = data.num;
        let msg = { msg: `${data.name}退出群聊` }
        this.list.push(msg)
      })
    }
  },


}
</script>
<style lang="less" scoped>
.home {
  width: 50%;
  max-width: 50%;
  margin: auto;
  position: relative;
  border: 1px solid #ccc;
  box-sizing: border-box;
  .count {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  margin-top: 200px;
  .content {
    padding: 30px;
    height: 1000px;
  }
  li {
    display: flex;
    align-items: flex-start;

    margin: 15px 0;
    &.right {
      justify-content: flex-end;
    }
    .el-avatar {
      width: 28px;
      height: 28px;
      line-height: 28px;
      margin-right: 15px;
    }
    .msg {
      background-color: #ccc;
      padding: 10px;
    }
    div {
      display: flex;
      flex-direction: column;
    }
  }
  .send {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
  }
}
</style>