使用SpringBoot + WebSocket实现单人聊天

前言

最近在做一个聊天功能，具体需求：类似微信，在一个好友列表中，点击某个好友就可以建立与该好友的聊天连接，向该好友发送消息，对方能够实时显示出来，进行真正意义上的聊天。
在做之前，不管在界面布局，还是功能实现方面都下了一点功夫，最终还是一点点实现了，现在就记录一下。

在编码之前得先了解一下WebSocket

1. 什么是WebSocket?

• WebSocket，即Web浏览器与Web服务器之间全双工通信标准；是HTML5中的协议，支持持久连续，http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个
• 一旦确立WebSocket通信连接，不论服务器还是客户端，任意一方都可直接向对方发送报文

2. WebSocket特点？

• 推送功能：支持由服务器向客户端推送数据的推送功能，这样，服务器可直接发送数据，而不必等待客户端的请求
• 减少通信量：只要建立起WebSocket，就可以一直保持连接状态

头部字段多了下面2个属性：

Upgrade:webSocket
Connection:Upgrade

1、实现效果

点击左侧好友列表时，会建立websocket连接，把当前发消息的用户发送给websocket服务器

输入消息

2、前端实现

<!-- Chat.vue页面 -->
<template>
  <div id="chat">
    <!-- 聊天消息管理 -->
    <el-container style="height: 620px; border: 1px solid #eee">
      <el-aside width="250px">
        <user-list
          :friendList="this.friendList"
          @set-contact="getcontact"
          ref="friends"
          :activeIndex="activeIndex"
        ></user-list>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <span>
            <h2>{
   {
   this.username}}</h2>
          </span>
        </el-header>
        <el-main style="height:400px;" class="msg-main">
          <chat-msg ref="msg" :user="this.username" id="msg-box"></chat-msg>
        </el-main>
        <div class="m-text">
          <textarea
            placeholder="按 Ctrl + Enter 发送"
            ref="sendMsg"
            v-model="contentText"
            @keyup.enter="sendText()"
          ></textarea>
          <div class="btn" :class="{['btn-active']:contentText}" @click="sendText()">发送</div>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import UserList from "../../components/chat/friendList";
import ChatMsg from "../../components/chat/message";
import InputText from "../../components/chat/text";
export default {
   
  data() {
   
    return {
   
      //好友列表
      friendList: [],
      activeIndex: null,
      //当前聊天好友
      activeFriend: [],
      friends: "",
      ws: null,
      count: 0,
      userId: this.$store.state.userInfo.uid, // 当前用户ID
      username: this.$store.state.userInfo.username, // 当前用户昵称
      avatar: this.$store.state.userInfo.uavatar, // 当前用户头像
      msgList: [], // 聊天记录的数组
      contentText: "" // input输入的值
    };
  },
  components: {
   
    UserList,
    ChatMsg,
    InputText
  },
  mounted() {
   
    this.getFridends(this.userId);
  },
  destroyed() {
   
    // 离开页面时关闭websocket连接
    this.ws.onclose(undefined);
  },
  methods: {
   
    select(value) {
   
      this.activeIndex = this.friendList.indexOf(value);
    },
    getcontact(list) {
   
      console.log(this.$store.state.userInfo);
      this.activeFriend = list;
      //保存当前聊天好友
      this.friends = list.ffriendName;
      this.activeIndex = this.friendList.indexOf(this.friends);
      this.getFridendInfo(this.friends);
      this.initWebSocket(this.username);
      this.getFridendMsg(this.friends);
    },
    // 发送聊天信息
    sendText() {
   
      let _this = this;
      _this.$refs["sendMsg"].focus();
      if (!_this.contentText) {
   
        return;
      }
      let params = {
   
        mfromuser: _this.username,
        mtouser: _this.a