Springboot+Vue实现在线聊天室项目springBoot整体架构
该聊天室为大二上学期计算机网络大作业,并且是本人第一次使用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;x<msg.length;x++){
if (msg[x].roomId == roomId){
console.log("找到了...index等于" + x)
that.selectMsgBox(roomId,x)
break;
}
}
return;
}
if (newMsg.content == "请求加为好友"){
console.log("接收到好友请求,home页面进行处理");
alert("有新的好友请求! " + newMsg.name + "请求加为好友")
return;
}
if (newMsg.content == "我同意了你的好友请求"){
that.updataRooms();
}
for (let x=0;x<oldMsg.length;x++){
if (oldMsg[x].roomId == newMsg.roomId){
if (roomIdN != null && oldMsg[x].roomId != roomIdN){
that.msg[x].tips ++;
}
that.msg[x].msg = newMsg.content;
var sel = that.select;
for (let index=0;index<sel.length;index++){
if (sel[index].roomId == oldMsg[x].roomId){
sel[index].tips = that.msg[x].tips;
sel[index].msg = newMsg.content;
}
}
if (x==0){
break
}
let m = that.msg;
let temp = m[x];
for (let index=m.length-1;index>0;index--){
m[index] = m[index-1];
}
m[0] = temp;
that.msg = m;
break;
}
}
//console.log("如果没有找到新消息的房间信息,则说明是新的聊天窗口,需要push一个聊天信息...")
//console.log("将新消息放在本页面msg数组的第一位..")
}})
}
)
stompClient.connect方法貌似返回了一个事件,当服务器端接收webSocket的请求后调用里面的方法,也就是监听函数。
这里监听函数很长,主要操作:判断是否是特殊消息(窗口抖动、好友申请) -> 更新sessionStorage中的信息 -> 更新当前页面data中的信息