原Vue + SpringBoot实现WebSocket通信
Vue + SpringBoot实现WebSocket通信
服务端
- 在SpringBoot项目中添加
ServerEndpointExporterBean的方法@Bean public ServerEndpointExporter exporter(){ return new ServerEndpointExporter(); } - 创建WebSocket客户端管理类:
WebSocketComponent.java
package cn.coralcloud.blog.web.component; import com.alibaba.fastjson.JSON; import org.springframework.stereotype.Component; import javax.websocket.*; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.util.Objects; import java.util.concurrent.CopyOnWriteArraySet;
/**
@author geff
@name WebSocketComponent
@description
@date 2019-12-18 14:22
/ @ServerEndpoint(value = "/websocket") @Component public class WebSocketComponent { /**
静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
/ private static int onlineCount = 0; /**
concurrent包的线程安全Set，用来存放每个客户端对应的CumWebSocket对象。
/ private static CopyOnWriteArraySet
webSocketSet = new CopyOnWriteArraySet<>(); /** 与某个客户端的连接会话，需要通过它来给客户端发送数据
/ private Session session;
/**
连接建立成功调用的方法
@param session session
/ @OnOpen public void onOpen(Session session) { this.session = session; //加入set中 webSocketSet.add(this); //添加在线人数 addOnlineCount(); System.out.println("新连接接入。当前在线人数为：" + getOnlineCount()); }
/**
连接关闭调用的方法
/ @OnClose public void onClose() { //从set中删除 webSocketSet.remove(this); //在线数减1 subOnlineCount(); System.out.println("有连接关闭。当前在线人数为：" + getOnlineCount()); }
/**
收到客户端消息后调用
@param message message
@param session session
/ @OnMessage public void onMessage(String message, Session session) { System.out.println("客户端发送的消息：" + message); sendAll(JSON.toJSONString(messageDTO), session.getId()); }
/**
群发
@param message message
/ private static void sendAll(String message, String sessionId) { webSocketSet.forEach(item -> {
if(!item.session.getId().equals(sessionId)){ //群发 try { item.sendMessage(message); } catch (IOException e) { e.printStackTrace(); } }}); }
/**
发生错误时调用
@param session session
@param error error
/ @OnError public void onError(Session session, Throwable error) { System.out.println("----websocket-------有异常啦"); error.printStackTrace(); }
/**
减少在线人数
/ private void subOnlineCount() { WebSocketComponent.onlineCount--; }
/**
添加在线人数
/ private void addOnlineCount() { WebSocketComponent.onlineCount++; }
/**
当前在线人数
@return int
/ public static synchronized int getOnlineCount() { return onlineCount; }
/**
发送信息
@param message message
throws IOException
/ public void sendMessage(String message) throws IOException { //获取session远程基本连接发送文本消息 this.session.getBasicRemote().sendText(message); //this.session.getAsyncRemote().sendText(message); }
@Override public boolean equals(Object o) { if (this == o) {
return true;} if (o == null || getClass() != o.getClass()) {
return false;} WebSocketComponent that = (WebSocketComponent) o; return Objects.equals(session, that.session); }
@Override public int hashCode() { return Objects.hash(session); } }
@ServerEndpoint 注解标识当前WebSocket服务端endpoint地址, 本文实际前端访问的ws地址为:
ws://localhost:8080/websocket。
至此， 服务端工作完成。
页面VUE端
<template>
<el-card v-loading="loading" element-loading-spinner="el-icon-loading" :body-style="{padding: '5px',backgroundColor: '#eee'}" class="socket-box" shadow="hover">
<div class="socket-box__content" :style="{height: (boxHeight - 125) + 'px'}" id="socket-content">
<div v-if="hasMore" @click="loadMore" class="load-more">
<span>加载更多</span>
</div>
<div v-else style="width: 100%;text-align: center;font-size: 12px">没有更多了</div>
<div class="item" v-for="m in messages" :class="checkMe(m) ? 'sender' : ''">
<div class="slide">
<div class="avatar" :style="{background: m.background}">{{m.name.substring(0, 1)}}</div>
<div class="meta">
<div class="name">{{m.name}}</div>
<div class="date">{{m.createTime|datetime}}</div>
</div>
</div>
<p>{{m.content}}</p>
</div>
</div>
<div class="socket-box__footer">
<el-form @submit.native.prevent>
<el-form-item>
<el-input type="textarea" resize="none" :rows="3" :disabled="!connect"
:placeholder="connect ? '输入内容...' : '当前连接断开, 请刷新重试! '" :clearable="true" v-model="message"
@keydown.native.enter="submitMsgForm"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="sendMsg(message)" :disabled="!connect" style="width: 100%" type="primary" size="small">发送 (Enter)</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</template>
<script>
import {GET} from "@/api";
export default {
name: "Chatroom",
data(){
return {
messages: [],
message: '',
// boxHeight: document.documentElement.clientHeight - 85,
hasMore: true,
pager: {pageNo: 1, pageSize: 10, total: 0},
loading: false,
connect: false
}
},
props: {
boxHeight: {
type: Number,
required: true
}
},
methods: {
submitMsgForm(event){
if(event.shiftKey){
return;
}
event.preventDefault();
this.sendMsg(this.message)
},
checkMe(message){
let user = localStorage.getItem("socketUser");
if(user){
user = JSON.parse(user);
return user.uid === message.uid
} else {
return false;
}
},
initWebSocket: function () {
this.websock = new WebSocket(`ws://localhost:8080/websocket`);
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onmessage = this.websocketonmessage;
this.websock.onclose = this.websocketclose;
const that = this;
that.loading = true;
GET({
url: '/api/personal/web/message/socketData?pageNo=1',
callback: res => {
if(res.code === 200){
that.messages = res.data.messages;
that.hasMore = res.data.messages.length === that.pager.pageSize;
that.$nextTick(function () {
document.getElementById("socket-content").scroll({
top: document.getElementById("socket-content").scrollHeight,
left: 0,
behavior: 'smooth'
})
})
}
that.loading=false
}
})
},
sendMsg(data){
if(/^\s*$/.test(data)){
this.message = '';
return;
}
// 发送时传入JSON(UID, 昵称, 内容)
const local = localStorage.getItem("socketUser");
if(local){
const l = JSON.parse(local);
this.send(l, data)
} else {
// 弹框
this.$prompt('首次发表, 请输入昵称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({ value }) => {
// 随机生成UID
const uid = this.randomVideoUuid(32, 16);
const form = {
uid: uid,
name: value,
background: `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`
};
localStorage.setItem("socketUser", JSON.stringify(form));
this.send(form, data)
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
}
},
send(obj, data){
obj.content = data;
obj.createTime = new Date().getTime();
this.websock.send(JSON.stringify(obj));
this.message = '';
this.messages.push(obj);
this.$nextTick(function () {
document.getElementById("socket-content").scroll({
top: document.getElementById("socket-content").scrollHeight,
left: 0,
behavior: 'smooth'
})
})
},
loadMore(){
this.loading = true;
const that = this;
if(this.hasMore){
this.pager.pageNo += 1;
GET({
url: '/api/personal/web/message/socketData?pageNo=' + this.pager.pageNo,
callback: res => {
if(res.code === 200){
that.messages = [...res.data.messages, ...that.messages];
that.hasMore = res.data.messages.length >= that.pager.pageSize;
}
that.loading = false;
}
})
}
},
websocketonopen: function (e) {
console.log("WebSocket连接成功", e);
this.connect = true;
},
websocketonerror: function (e) {
console.log("WebSocket连接发生错误");
this.connect = false;
},
websocketonmessage: function (e) {
const da = JSON.parse(e.data);
this.messages.push(da);
this.$nextTick(function () {
document.getElementById("socket-content").scroll({
top: document.getElementById("socket-content").scrollHeight,
left: 0,
behavior: 'smooth'
})
})
},
websocketclose: function (e) {
console.log("connection closed (" + e.code + ")");
},
randomVideoUuid(len, radix) {
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
let uuid = [];
radix = radix || chars.length;
if (len) {
for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
} else {
let r;
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
for (let i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random()*16;
uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join('');
},
},
mounted() {
this.initWebSocket();
}
}
</script>本段代码为简单的Vue实现的网页聊天室代码, 其中@/api为自己简单封装的JS函数, 用户初次进入页面时会生成一个随机UID保存到localStorage中,在mounted周期中初始化websocket连接。本聊天室最终效果地址： https://web.coralcloud.cn/blog/message