ruoyi-vue + websocket实现聊天功能

ruoyi-vue + websocket实现一对一聊天功能，包括前端界面设计

1. 后端

1.1 新建websocket包

1.2 引入maven依赖

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
  <version>2.0.4.RELEASE</version>
</dependency>

1.3 新建 WebSocketConfig 配置类

package com.ruoyi.framework.webSocket;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * websocket 配置
 *
 */
@Configuration
public class WebSocketConfig
{
    @Bean
    public ServerEndpointExporter serverEndpointExporter()
    {
        return new ServerEndpointExporter();
    }
}

1.4 新建 MessageType 消息类型

package com.ruoyi.framework.webSocket;

/**
 * 消息类型
 */
public enum MessageType {

    SYS("sys", "系统消息"), CHAT("chat", "聊天消息");

    private String type;
    private String value;

    private MessageType(String type, String value) {
        this.type = type;
        this.value = value;
    }

    public String getType() {
        return type;
    }

    public String getValue() {
        return value;
    }
}

1.5 新建 WebSocketServer 服务类

package com.ruoyi.framework.webSocket;

import com.alibaba.fastjson.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArrayList;
import java.util.concurrent.atomic.AtomicInteger;

@Component
@ServerEndpoint("/websocket/{userId}")
public class WebSocketServer {
    private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);

    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static AtomicInteger onlineNum = new AtomicInteger();

    //concurrent包的线程安全Set，用来存放每个客户端对应的WebSocketServer对象。
    private static ConcurrentHashMap<String, Session> sessionPools = new ConcurrentHashMap<>();

    /**
     * 线程安全list，用来存放 在线客户端账号
     */
    public static List<String> userList = new CopyOnWriteArrayList<>();


    /**
     * 连接成功
     * @param session
     * @param userId
     */
    @OnOpen
    public void onOpen(Session session, @PathParam(value = "userId") String userId) {
        sessionPools.put(userId, session);
        if (!userList.contains(userId)) {
            addOnlineCount();
            userList.add(userId);
        }
        log.debug("ID为【" + userId + "】的用户加入websocket！当前在线人数为：" + onlineNum);
        log.debug("当前在线：" + userList);
    }

    /**
     * 关闭连接
     * @param userId
     */
    @OnClose
    public void onClose(@PathParam(value = "userId") String userId) {
        sessionPools.remove(userId);
        if (userList.contains(userId)) {
            userList.remove(userId);
            subOnlineCount();
        }
        log.debug(userId + "断开webSocket连接！当前人数为" + onlineNum);

    }

    /**
     * 消息监听
     * @param message
     * @throws IOException
     */
    @OnMessage
    public void onMessage(String message) throws IOException {
        JSONObject jsonObject = JSONObject.parseObject(message);
        String userId = jsonObject.getString("userId");
        String type = jsonObject.getString("type");
        if (type.equals(MessageType.CHAT.getType())) {
            log.debug("聊天消息推送");
            sendToUser(userId, JSONObject.toJSONString(jsonObject));
        }
    }

    /**
     * 连接错误
     * @param session
     * @param throwable
     * @throws IOException
     */
    @OnError
    public void onError(Session session, Throwable throwable) throws IOException {
        log.error("websocket连接错误！");
        throwable.printStackTrace();
    }

    /**
     * 发送消息
     */
    public void sendMessage(Session session, String message) throws IOException, EncodeException {
        if (session != null) {
            synchronized (session) {
                session.getBasicRemote().sendText(message);
            }
        }
    }

    /**
     * 给指定用户发送信息
     */
    public void sendToUser(String userId, String message) {
        Session session = sessionPools.get(userId);
        try {
            if (session != null) {
                sendMessage(session, message);
            }else {
                log.debug("推送用户不在线");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public static void addOnlineCount() {
        onlineNum.incrementAndGet();
    }

    public static void subOnlineCount() {
        onlineNum.decrementAndGet();

    }
}

1.6 放行websocket接口

在 ruoyi-framework/src/main/java/com.ruoyi.framework/config/SecurityConfig 下放行接口

2. 前端

2.1 设置websocket连接地址

在 .env.development 文件下

# 页面标题
VUE_APP_TITLE = 管理系统

# 开发环境配置
ENV = 'development'

# 若依管理系统/开发环境
VUE_APP_BASE_API = '/api'

# websocket服务地址
VUE_APP_SOCKET_SERVER = 'ws://192.168.5.70:8081/websocket/'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

线上配置在 .env.production 文件 

2.2 在src/utils下新建 websocket.js

import { Notification } from "element-ui";
import { getToken } from "./auth";
import store from '../store'

var socket = null;//实例对象
var lockReconnect = false; //是否真正建立连接
var timeout = 20 * 1000; //20秒一次心跳
var timeoutObj = null; //心跳倒计时
var serverTimeoutObj = null; //服务心跳倒计时
var timeoutnum = null; //断开 重连倒计时

const initWebSocket = async () => {
  if ("WebSocket" in window) {
    if (!store.state.user.id) {
      console.log("未登录！websocket工具获取不到userId")
    }else {
      const wsUrl = process.env.VUE_APP_SOCKET_SERVER + store.state.user.id;
      socket = new WebSocket(wsUrl);
      socket.onerror = webSocketOnError;
      socket.onmessage = webSocketOnMessage;
      socket.onclose = closeWebsocket;
      socket.onopen = openWebsocket;
    }
  } else {
    Notification.error({
      title: "错误",
      message: "您的浏览器不支持websocket，请更换Chrome或者Firefox",
    });
  }
}

//建立连接
const openWebsocket = (e) => {
  start();
}

const start = ()=> {
  //开启心跳
  timeoutObj && clearTimeout(timeoutObj);
  serverTimeoutObj && clearTimeout(serverTimeoutObj);
  timeoutObj = setTimeout(function() {
    //这里发送一个心跳，后端收到后，返回一个心跳消息
    if (socket.readyState == 1) {
      //如果连接正常
      // socket.send("heartbeat");
    } else {
      //否则重连
      reconnect();
    }
    serverTimeoutObj = setTimeout(function() {
      //超时关闭
      socket.close();
    }, timeout);
  }, timeout);
}

//重新连接
const reconnect =() => {
  if (lockReconnect) {
    return;
  }
  lockReconnect = true;
  //没连接上会一直重连，设置延迟避免请求过多
  timeoutnum && clearTimeout(timeoutnum);
  timeoutnum = setTimeout(function() {
    //新连接
    initWebSocket();
    lockReconnect = false;
  }, 1000);
}

//重置心跳
const reset =() => {
  //清除时间
  clearTimeout(timeoutObj);
  clearTimeout(serverTimeoutObj);
  //重启心跳
  start();
}

const sendWebsocket = (message) =>{
  socket.send(message);
}

const webSocketOnError = (e) => {
  initWebSocket();
  reconnect();

}

//服务器返回的数据
const webSocketOnMessage = (e)=> {
  //判断是否登录
  if (getToken()) {
    //window自定义事件
    window.dispatchEvent(
      new CustomEvent("onmessageWS", {
        detail: {
          data: JSON.parse(e?.data)
        },
      })
    );
  }
  // socket.onmessage(e)
  reset();
}

const closeWebsocket=(e) => {
  reconnect();
}

//断开连接
const close =() => {
//WebSocket对象也有发送和关闭的两个方法，只需要在自定义方法中分别调用send()和close()即可实现。
  socket.close();
}
//具体问题具体分析,把需要用到的方法暴露出去
export default { initWebSocket, sendWebsocket, webSocketOnMessage, close };

2.3 main.js中引入websocket工具

import Vue from 'vue'

import Cookies from 'js-cookie'

import Element from 'element-ui'
import './assets/styles/element-variables.scss'

import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'
import store from './store'
import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import { download } from '@/utils/request'

import './assets/icons' // icon
import './permission' // permission control
import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";

// 分页组件
import Pagination from "@/components/Pagination";
// 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar"
// 富文本组件
import Editor from "@/components/Editor"
// 文件上传组件
import FileUpload from "@/components/FileUpload"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview"
// 字典标签组件
import DictTag from '@/components/DictTag'
// 头部标签组件
import VueMeta from 'vue-meta'
// 字典数据组件
import DictData from '@/components/DictData'
// webSocket工具
import webSocket from "./utils/webSocket"

// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
Vue.prototype.$websocket = webSocket

// 全局组件挂载
Vue.component('DictTag', DictTag)
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)

Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
DictData.install()

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online! ! !
 */

Vue.use(Element, {
  size: Cookies.get('size') || 'medium' // set element-ui default size
})

Vue.config.productionTip = false

let newVue = new Vue({
  el: '#app',
  created() {
    //监听用户窗口是否关闭
    window.addEventListener('beforeunload', this.closeSocket);
  },
  destroyed() {
    window.removeEventListener('beforeunload', this.closeSocket);
  },
  methods: {
    onBeforeUnload(event) {
      // 在这里编写你想要执行的代码
      // 例如：发送数据到服务器或者显示警告信息
      // 设置event.returnValue以显示浏览器默认的警告信息
      event.returnValue = '您可能有未保存的更改！';
    },
    closeSocket() {
      //关闭websocket连接
      this.$websocket.close();
    }
  },
  router,
  store,
  render: h => h(App)
})

export default newVue

2.4 src/store/modules/user.js修改

import newVue from "@/main";

// 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo().then(res => {
          const user = res.user
          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/avatar_login.png") : user.avatar;
          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
            commit('SET_ROLES', res.roles)
            commit('SET_PERMISSIONS', res.permissions)
          } else {
            commit('SET_ROLES', ['ROLE_DEFAULT'])
          }
          commit('SET_ID', user.userId)
          commit('SET_NAME', user.userName)
          commit('SET_AVATAR', avatar)
          //TODO 获取用户信息时检查socket连接状态并进行连接
          newVue.$websocket.initWebSocket();
          resolve(res)
        }).catch(error => {
          reject(error)
        })
      })
    }

// 退出系统
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          commit('SET_PERMISSIONS', [])
          //TODO 用户退出登录后关闭连接
          newVue.$websocket.close();
          removeToken()
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }

用户登录后获取用户信息时连接websocket并在登出时关闭连接

2.5 聊天页面

<template>
  <div class="app-container">
    <el-container class="app">
      <el-aside width="calc(30% - 20px)" style="background-color: white">
        <el-container>
          <el-header>
            <el-row>
              <el-col :span="24">
                <el-input suffix-icon="el-icon-search" placeholder="Enter 回车搜索联系人" v-model="contactQueryParams.userName" @keyup.enter.native="getContactList"/>
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
                <el-button size="mini">全部</el-button>
                <el-button size="mini">新招呼</el-button>
                <el-button size="mini">仅沟通</el-button>
                <el-button size="mini">有面试</el-button>
            </el-row>
          </el-header>
          <div v-loading="contactListLoading">
            <el-main v-if="contactList.length > 0" v-infinite-scroll="contactLoadMore" :infinite-scroll-distance="750" :infinite-scroll-disabled="contactListTotal < 10" class="msgListMain">
              <el-row class="msgUserList" v-for="(item, index) in contactList" :key="item.contactUserId" :style="index > 0 && 'margin-top: 10px'" @click.native="loadMessage(item.id)">
                <el-col :span="5">
                  <el-image :src="item.avatar" fit="fill" style="width: 70%;border-radius: 50%; margin-top: 6px"/>
                </el-col>
                <el-col :span="19">
                  <el-row>
                    <el-col :span="5"><span style="font-weight: 500; font-size: 16px">{{item.userName}}</span></el-col>
                    <el-col :span="15">
                      <span style="font-size: 15px">{{item.job}}</span>
                      <el-divider direction="vertical"/>
                      <span style="font-size: 15px">{{item.salary}}</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="5" style="font-size: 13px; text-overflow: ellipsis; white-space: nowrap">
                      <span><i class="el-icon-circle-check"></i>  {{item.endMsg}}</span>
                    </el-col>
                    <el-col :span="5" style="float: right">
                      <el-dropdown class="hover_down_menu">
                        <span class="el-dropdown-link">
                          <i class="el-icon-arrow-down el-icon-more"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>置顶</el-dropdown-item>
                          <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-main>
            <el-main v-else class="msgListMain_empty">
              <el-row>
                <el-col :span="24">
                  <img src="@/assets/images/contact.png" style="width: 80%; height: 80%"/>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <span style="color: gray">暂无联系人</span>
                </el-col>
              </el-row>
            </el-main>
          </div>
        </el-container>
      </el-aside>
      <el-main :class="currentContact.id ? 'main' : 'main_empty'" v-loading="msgListLoading">
        <div v-if="currentContact.id">
          <el-row>
            <el-col :span="8" style="color: #666">
              <span style="font-weight: 500; font-size: 16px">{{currentContact.userName}}</span>
              <span style="font-size: 16px; margin-left: 30px">{{currentContact.industry}}</span>
              <el-divider direction="vertical"/>
              <span style="font-size: 16px;">{{currentContact.job}}</span>
            </el-col>
            <el-col :span="6" style="float: right">
              <el-button size="small" type="primary">电话</el-button>
              <el-button size="small" type="primary" icon="el-icon-time">面试</el-button>
              <el-button size="small">取消置顶</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span>{{currentContact.major}}</span>
              <span style="color: red; font-size: 17px; margin-left: 20px">{{currentContact.salary}}</span>
              <span style="margin-left: 20px">{{currentContact.city}}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="msg_content" id="message_content">
              <el-row v-for="(item, index) in msgList" :key="item.id" :style="index > 0 && 'margin-top: 30px'">
                <div v-if="item.userId === currentContact.contactUserId">
                  <el-col :span="2" style="text-align: center">
                    <el-image :src="currentContact.avatar" fit="cover" style="width: 40%;border-radius: 50%"/>
                  </el-col>
                  <el-col :span="10" style="font-size: 16px; line-height: 40px;">
                    <span>{{item.content}}</span>
                    <span style="font-size: 11px; color: gray; margin-left: 5px">{{item.createTime}}</span>
                  </el-col>
                </div>
                <div v-else>
                  <el-col :span="24" style="font-size: 16px;">
                    <div class="chat_bubble">
                      <span>{{item.content}}</span>
                    </div>
                    <i class="el-icon-circle-check" style="float: right; margin-right: 5px; color: lightgray; vertical-align: bottom; margin-top: 23px"></i>
                    <span style="font-size: 11px; color: gray; margin-right: 5px; float: right; margin-top: 25px">{{item.createTime}}</span>
                  </el-col>
                </div>
              </el-row>
              <el-row id="message_content_end" style="height: 15px"><el-col></el-col></el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="24">
                  <el-popover
                    placement="top-start"
                    trigger="click">
                    <div>
                      <VEmojiPicker :showSearch="false" @select="insertEmoji" />
                    </div>
                    <img slot="reference" src="@/assets/images/emoji.png" title="表情" class="input_top_menu_img"/>
                  </el-popover>
                  <img src="@/assets/images/offenWord.png" title="常用语" class="input_top_menu_img" style="margin-left: 10px"/>
                </el-col>
              </el-row>

              <el-input type="textarea" :rows="3" v-model="inputVal" style="font-size: 17px; color: black" @keyup.enter.native="send" placeholder="Enter 回车发送消息"/>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-row>
            <el-col :span="24">
              <img src="@/assets/images/message.png"/>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span style="color: gray">与您进行过沟通的联系人都会在左侧列表中显示</span>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { VEmojiPicker } from 'v-emoji-picker';
import { parseTime } from '@/utils/ruoyi';
import { listContact, getContact } from "@/api/system/contact";
import { addMessage } from "@/api/system/message";

export default {
  name: "chat",
  components: {
    VEmojiPicker
  },
  data() {
    return {
      //联系人列表
      contactList: [],
      contactListTotal: 0,
      contactListLoading: false,
      //消息记录
      msgList: [],
      msgListTotal: 0,
      msgListLoading: false,
      inputVal: '',
      search: '',
      contactUserId: null,
      userId: null,
      contactQueryParams: {
        pageSize: 10,
        pageNum: 1
      },
      currentContact: {}
    }
  },
  mounted() {
    window.addEventListener("onmessageWS", this.subscribeMessage);
  },
  created() {
    this.userId = this.$store.state.user.id;
    this.subscribeMessage();
    this.getContactList();
  },
  methods: {
    getContactList() {
      this.contactListLoading = true;
      this.contactQueryParams.userId = this.userId;
      listContact(this.contactQueryParams).then(response => {
        if (response.code === 200) {
          this.contactList = response.rows;
          this.contactListTotal = response.total;
          const contactUserId = this.$route.query.userId;
          if (contactUserId) {
            this.contactUserId = contactUserId;
            let contact = response.rows.find(row => row.contactUserId == contactUserId);
            this.loadMessage(contact.id);
          }
        }
        this.contactListLoading = false;
      })
    },
    contactLoadMore() {
      // this.contactQueryParams.pageSize = 5;
      // this.contactQueryParams.pageNum++;
      this.getContactList();
    },
    loadMessage(concatId) {
      this.msgListLoading = true;
      getContact(concatId).then(response => {
        if (response.code === 200) {
          this.currentContact = response.data;
          this.msgList = response.data.messages;
        }
        this.msgListLoading = false;
        this.fleshScroll();
      })
    },
    insertEmoji(emoji) {
      this.inputVal += emoji.data;
    },
    send() {
      const message = {
        contactId: this.currentContact.id,
        userId: this.userId,
        content: this.inputVal,
        roomId: this.currentContact.roomId
      }
      this.msgList.push({
        ...message,
        id: this.msgList.length + 1,
        createTime: parseTime(new Date())
      })
      this.fleshLastMsg();
      addMessage(message);
      const msg = {
          sendUserId: this.userId,
          sendUserName: this.$store.state.user.name,
          userId: this.currentContact.contactUserId,
          type: "chat",
          detail: this.inputVal
      }
      this.$websocket.sendWebsocket(JSON.stringify(msg));
      this.inputVal = '';
      this.fleshScroll();
    },
    subscribeMessage(res) {
      console.log(res);
      if (res) {
          const { sendUserId, sendUserName, userId, type, detail } = res.detail.data;
          const message = {
            id: 1,
            contactId: userId,
            userId: sendUserId,
            content: detail,
            roomId: this.currentContact.roomId,
            createTime: parseTime(new Date())
          }
          this.msgList.push(message);
          this.fleshLastMsg();
          this.fleshScroll();
      }
    },
    fleshLastMsg() {
      const index = this.contactList.findIndex(e => e.id === this.currentContact.id);
      this.contactList[index].endMsg = this.msgList[this.msgList.length - 1].content;
    },
    fleshScroll() {
      this.$nextTick(() => {
        document.getElementById("message_content_end").scrollIntoView();
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  background: linear-gradient(180deg, rgba(0, 190, 189, .1), rgba(136, 255, 254, .2) 50%, rgba(242, 244, 247, .1));
}
.app {
  background-color: white;
  border-radius: 12px 12px 0 0;
}
.msgListMain {
  height: 700px;
  overflow-y:auto;
  margin-top: 15px;
}
.msgUserList {
  border-radius: 10px;
}
.msgListMain_empty {
  display: flex;
  height: 600px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hover_down_menu {
  display: none;
}
.msgUserList:hover {
  background-color: #f2f2f2;
  cursor: pointer;
}
.msgUserList:hover .hover_down_menu{
  display: block;
}
.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 15px;
  font-weight: 500;
}
.main {
  background-color: white;
  height: 800px;
  margin-left: 5px;
}
.main_empty {
  display: flex;
  background-color: white;
  height: 700px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.main_empty .el-row {
  text-align: center;
}
.main_empty img {
  width: 25%;
}
.msg_content {
  margin-top: 30px;
  height: 550px;
  overflow: auto;
  //background-color: gray;
}
.chat_bubble {
  float: right;
  margin-right: 35px;
  color: #333;
  background-color: rgba(0, 190, 189, .2);
  height: 40px;
  line-height: 40px;
  padding: 0 12px 0 12px;
  border-radius: 5px;
}
.input_top_menu_img{
  width: 22px;
  height: 22px;
  cursor: pointer;
}
</style>

ps: VEmojiPicker 是一个选择表情的vue组件 

"v-emoji-picker": "^2.3.3"

2.6 界面效果