使用WebSocket实现简易聊天室

WebSocket是什么？

实现过程 （vue技术实现）

静态：创建两个页面

登录页面

<template>
  <div class="home">
      <p><span>昵称：</span><input v-model="data" type="text"></p>
      <p><span>头像：</span><input v-model="head" type="text"></p>
    <p><button @click="handleLogin">登录</button></p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      data:"",
      head:""
    }
  },
  methods:{
  //点击登录按钮跳转到聊天室
    handleLogin(){
      this.$router.push({
        path:"/about",
        query:{
          data:this.data,
          head:this.head
        }
      })
    }
  }
}
</script>

聊天室页面

实现思路：

1、在created中获取登录页面传过来的数据，在data中定义并赋值。
2、在methods中定义一个函数来连接socket
3、在函数中创建一个WebSocket实例对象，并传入服务器地址
4、通过socket.onopen连接
5、连接成功后利用socket.send发送请求，将定义的用户信息数据发给服务器，注意：发送的消息内容需要用JSON.stringify转化为字符串。
6、再通过socket.onmessage去接收服务器返回的消息，将消息再通过JSON.parse处理后，根据类型来判断如何渲染

<template>
  <div class="chat-wrap">
    <div>在线人数：{{num}}</div>
    <div class="item-wrap" v-for="(item,index) in chatList" :key="index" >
      <img class="chat-img" :src="item.head" alt="" >
      <div class="item-desc">
        <span class="chat-name">{{item.userName}}</span>
        <p class="chat-msg">{{item.data}}</p>
      </div>
    </div>
    <div class="chat-send">
      <input type="text" v-model="msg">
      <button @click="sendMsg">发送</button>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      userInfo:{
        type:"name",
        data:"",
        head:""
      },
      socket:null,
      msg:"",
      num:"",
      chatList:[],
    }
  },
  created(){
    //获取登录页面传过来的数据
    let {data,head}=this.$route.query;
    this.userInfo.data = data;
    this.userInfo.head  =head;
    this.creatSocket();
  },
  methods:{
    //连接socket
    creatSocket(){
      // 创建WebSocket实例对象
      this.socket = new WebSocket('ws://129.211.169.131:10009/globalchat');
      //连接成功的回调
      this.socket.onopen = () =>{
        console.log("连接成功");
        //连接成功后发送请求，需要用JSON.stringify转化为字符串
        this.socket.send(JSON.stringify(this.userInfo))
      };
      //连接错误
      this.socket.onerror = ()=>{
        console.log("连接错误");
      };
      //接收消息的回调
  this.socket.onmessage = this.serverToMine;
    },
    serverToMine(res){
      console.log(res);
      let data = JSON.parse(res.data);
      //判断type类型来进行渲染
      if(data.type == "message"){
      //将所有的消息存放到chatList数组中
          this.chatList.push({
            head:data.head,
            userName:data.userName,
            data:data.data
          });
      }else if(data.type == "count"){
        this.num = data.data
      }
      console.log("服务器发给我",res);
    },
    sendMsg(){
      let sendID = {
        type:"message",
        data:this.msg,
      };
      this.socket.send(JSON.stringify(sendID))
    }
  }
}
</script>
<style lang="less" scoped>
.chat-wrap{
  padding: 20px;
  background-color: #eee;
  height: 100%;
  .item-wrap{
    display: flex;
    .chat-img{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .item-desc{
      display: flex;
      flex-direction: column;
      
      .chat-msg{
        background-color: white;
        border-radius: 20px;
        padding: 10px 15px;
      }
    }
  }
  .chat-send{
    background-color: #eee;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>

最终实现效果