Message.vue

<template>
    <div>
        <div class="msg-title">
				相亲相爱一家人
        </div>
        <div class="msg-content" ref="message">
            <p v-if="initMsg">{{initMsg}}</p>
            <ul>
                <li v-for="(msg,index) in msgList" :key="index">
                    <template v-if="msg.code == 1">
                        <span>{{msg.sName}}</span><span>{{msg.time}}</span>
                        <p>{{msg.msg}}</p>
                    </template>
                    <!-- template 不会显示在页面上 一般搭配if使用 -->
                    <template v-if="msg.code == 2">
                        <span>{{msg.time}}</span>
                        <p>{{msg.sName}}<b>说：</b>
                            <span v-html="msg.msg"></span>
                        </p>
                    </template>
                    <br>
                    
                </li>
            </ul>
        </div>
        <div class="send-msg">
            <textarea placeholder="请输入信息" class="layui-textarea send-con" v-model="message" @keydown.enter="sendMsg"></textarea>
            <button type="button" class="layui-btn send-btn" @click="sendMsg">
                <i class="layui-icon">&#xe609;</i>   
                发送(Enter)
            </button>
        </div>
    </div>
</template>

<script>
import pubsub from 'pubsub-js';
export default {
    name:'Message',
    data (){
        return {
            message:"",
            initMsg:"",
            msgList:[]
        }
    },
    methods:{
        sendMsg(){
            //发给APP组件，让APP组件发给服务器
            pubsub.publish('sendMsg',this.message);
            this.message = "";
        }
    },
    mounted(){//所有元素加载完成之后调用
        //创建一个消息接收者
        this.pub = pubsub.subscribe('init',(nsgName,data) => {
            this.initMsg = data;
        });
        //接收信息
        this.newUser = pubsub.subscribe('newUser',(nsgName,data) => {
            // {"code":1,"msg":"周攀连接上来了","sName":"系统","time":"2021-10-13 14:57:49"}
            //在数组后面追加对象
            this.msgList.push(data);
            setTimeout(() => {
                //滚动条在最底部 设置滚动条的当前高度为最大高度
                this.$refs.message.scrollTop = this.$refs.message.scrollHeight;
            }, 500);
        });

    },
    beforeDestroy(){//组件摧毁时触发
        //摧毁掉消息接收者，提高性能
        pubsub.unsubscribe(this.pub);
        pubsub.unsubscribe(this.newUser);
    }
}
</script>

<style>
.msg-title{
    width: 700px;
    height: 50px;
    float: left;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
    background-color: #F8EDEB;
}
.msg-content{
    width: 700px;
    height: 650px;
    /* 垂直滚动条 */
    overflow-y: auto;
    float: left;
    /* 强制换行 */
    word-wrap: break-word;
    background-color: #FFD7BA;
}
.send-msg{
    width: 700px;
    height: 200px;
    float: left;
    background-color: #FEC89A;
}
.send-btn{
    position: relative;
    left: 557px;
    bottom: 50px;
}
.send-con{
    height: 200px;
    position: relative;
}
</style>

UserList.vue

<template>
  <div class="user-list">
        <ul class="layui-menu" style="margin-top: 0px;">
            <li>
                <div class="layui-menu-body-title">张三</div>
            </li>
            <li>
                <div class="layui-menu-body-title">李四</div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'UserList'
}
</script>

<style>
    .user-list{
        width: 300px;
        height: 900px;
        float: left;
        background-color: #FAE1DD;
    }
</style>

App.vue

<template>
  <div id="app" class="box">
      <UserList/>
      <Message/>
  </div>
</template>

<script>
//引入组件
import UserList from './components/UserList.vue';
import Message from './components/Message.vue';
import pubsub from 'pubsub-js';
export default {
  name: 'App',
  components: {//注册组件
    UserList,
    Message
  },
  mounted(){//当所有DOM元素渲染完成之后会调用
      //   ws:// ip地址  / 接口名称
      var ws = new WebSocket("ws://192.168.1.188/ChatServer/张三");
      ws.onopen = function(){//通道建立时触发
          //通过pubsub 消息订阅插件发给mseeage组件  npm install pubsub-js -S
            pubsub.publish('init',"与聊天服务器连接成功");
      }
      ws.onmessage = function(event){//收到服务器发送的信息时触发
          //json字符串转对象
          var data = JSON.parse(event.data);
          if(data.code == 1){//有新人连上来的信息
              pubsub.publish('newUser',data);//把收到的信息发送给message组件
          }else if(data.code == 2){
              pubsub.publish('newUser',data);
          }
      }
      ws.onclose = function(){//连接断开时触发

      }
      ws.onerror = function(){//通道异常时触发

      }


      //接收消息组件发送给App组件
      this.sendMsg = pubsub.subscribe('sendMsg',(nsgName,data) => {
            //页面端websocket发送消息
            ws.send(data);
      });


      //当页面关闭时主动断开连接
      window.onbeforeunload = function(){
          ws.close();
      }
  },
    beforeDestroy(){//组件摧毁时触发
        //摧毁掉消息接收者，提高性能
        pubsub.unsubscribe(this.sendMsg);
    }
}
</script>
<style scoped>
body{
  background-color: #000000;
}
.box{
  width: 1000px;
  height: 900px;
  margin: 0 auto;
  background-color: #5FB878;
}
</style>