Springboot+Vue实现在线聊天室项目-主页面及聊天框页面webSocket的消息推送

Springboot+Vue实现在线聊天室项目springBoot整体架构

# Springboot+Vue实现在线聊天室项目目录

该聊天室为大二上学期计算机网络大作业，并且是本人第一次使用vue实现前后端分离的项目，前端架构尚未熟悉可能会出现一些不妥之处，还请大佬们指出。（本文章写于项目整体完成上线之后，所以一些细节并未写出）

通过socketJs 和 stomp连接webSocket

npm 下载

npm install socketjs-client

npm install stompjs

引入

import socketjs from 'sockjs-client'
import stomp from 'stompjs'

建立连接

var socket = new socketjs('http://www.guoruijava.xyz/api/chat/');
var stompClient = stomp.over(socket);
//stompClient.debug = null;
console.log("openSockt.js建立webSocket连接")

这里开发环境stompClient.dubug可以不设置为null，线上环境务必设为null将控制台的日志输出关闭

封装webSocket连接的js

import socketjs from 'sockjs-client'
import stomp from 'stompjs'

console.log(socketjs)
var socket = new socketjs('http://www.guoruijava.xyz/api/chat/');
var stompClient = stomp.over(socket);
//stompClient.debug = null;
console.log("openSockt.js建立webSocket连接")

setInterval(()=>{
stompClient.send("ping",{},"ping")
},30000)

export default{stompClient}

这里比较有意思的是在测试环境的时候一直是没有封装的，home页面和chat页面分别都进行一次连接，也就是需要有两个webSocket连接，显然是一种非常弱智的操作，直到开发完毕后才解决了这个问题。
具体参照：聊天室中WebSocket的封装实现不同页面接收相同消息后进行的不同操作

通过stompClient监听消息的推送

stompClient.connect(
                {},function(frame){
                    stompClient.subscribe('/topic/' + JSON.parse(sessionStorage.getItem("auth")).id,function(msg){
                        //console.log("监听收到广播消息,在home页面只收新消息...因为没开chatBox时完整消息是没有用的，home页面只显示最近的一条消息")
                       // console.log(JSON.parse(sessionStorage.getItem("auth")).id)
                        //console.log("接收到本用户的消息,修改home页面的msg")
                        //修改chatMsg,不然切换房间之后消息不会出现...
                        console.log("这里是home页面的监听到了消息")
                        if (JSON.parse(msg.body).timeStamp != that.timeStamp){
                        that.timeStamp =JSON.parse(msg.body).timeStamp;
                        var newMsg = JSON.parse(msg.body);
                        var oldMsg = that.msg;
                        var roomIdN = that.$route.params.id;
                        if (newMsg.content == "窗口抖动"){
                            //将这个页面设成第一页面
                            let roomId = newMsg.roomId;
                            var msg = that.msg;
                            console.log(msg)
                            for (let x=0;x0;index--){
                                  
                                    m[index] = m[index-1];
                               
                                }
                                m[0] = temp;
                                that.msg = m;
                                
                                break;
                            }
                        }
                        //console.log("如果没有找到新消息的房间信息，则说明是新的聊天窗口，需要push一个聊天信息...")
                        //console.log("将新消息放在本页面msg数组的第一位..")
                    }})
                }
            )

stompClient.connect方法貌似返回了一个事件，当服务器端接收webSocket的请求后调用里面的方法，也就是监听函数。
这里监听函数很长，主要操作：判断是否是特殊消息（窗口抖动、好友申请） -> 更新sessionStorage中的信息 -> 更新当前页面data中的信息