vue+WebSocket

<!--
  *@name index.vue
  *@author xxxx
  *@date 2024/3/30 10:56
-->
<template>
  <div>
    <div id="content">
    </div>
    <p><label for="myUserId">用户名称：</label>
      <input type="text" name="myUserId" id="myUserId" placeholder="用户名称" v-model="myUserId">
      <input type="submit" value="登录" id="login" @click="login"/>
    </p>
    <p><label for="targetUserId">目标用户名称：</label><input type="text" name="targetUserId" id="targetUserId" v-model="targetUserId" placeholder="目标用户名称"></p>
    <textarea name="message" id="message" v-model="message" cols="38" rows="10" placeholder="消息..."></textarea>
    <p><input type="submit" id="send" value="发送" @click="send"/></p>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      myUserId: '',
      ws: null,
      targetUserId: '',
      message:''
    }
  },
  methods: {
    login() {
      this.ws = new WebSocket(`ws://baidu1.cn:8081/webSocketServer/${this.myUserId}`);
      this.socket();
    },
    socket() {
      this.ws.onopen = function (params) {
        console.log('客户端连接成功')
      };
      this.ws.onmessage = function (e) {
        var data = JSON.parse(e.data);
        if(data.userId == this.myUserId){
          document.getElementById('content').append(`<div style="width: 500px;height:40px;line-height: 30px;"><p style="float:right;margin:0;padding:0;">我：${data.message}</p></div>`);
        }else{
          document.getElementById('content').append(`<div style="width: 500px;height:40px;line-height: 30px;"><p style="float:left;margin:0;padding:0;">${data.userId}：${data.message}</p></div>`);
        }
      };

      this.ws.onclose = function (evt) {
        console.log("关闭客户端连接");
      };

      this.ws.onerror = function (evt) {
        console.log("连接失败了");
      };
    },
    send() {
      this.ws.send(`{"targetUserId": "${this.targetUserId}" , "message": "${this.message}"}`);
    }
  }
}
</script>

<style scoped>
#content {
  overflow: auto;
  width: 500px;
  height: 300px;
  background-color: white;
}
</style>