简单记录一下搭建webSocket的过程
搭建webSocket非常简单,只需要以下两步
- 后台创建websocket配置类
- 后台创建websocket类
- 前端页面连接
后台WebSocket配置类如下
配置类,照搬即可
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class MyWebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
WebSocket类
这个类可以根据实际需求来进行封装,简化调用
import org.springframework.stereotype.Component;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;
@Component
//前端连接的地址路径
@ServerEndpoint("/websocket/{key}")
public class MyWebSocket {
//与某个客户端的连接会话,需要通过它来给客户端发送数据
private Session session;
private static CopyOnWriteArraySet<MyWebSocket> webSockets =new CopyOnWriteArraySet<>();
//用来存放每个客户端对应的WebSocket对象。若要实现服务端与单一客户端通信的话,可以使用Map来存放,其中Key可以为用户标识
private static Map<String,Session> sessionPool = new HashMap<String,Session>();
@OnOpen
public void onOpen(Session session, @PathParam(value="key")String key) {
this.session = session;
webSockets.add(this);
sessionPool.put(key, session);
System.out.println("【websocket消息】有新的连接,总数为:"+webSockets.size());
sendAllMessage("欢迎您,客户端");
}
@OnClose
public void onClose() {
webSockets.remove(this);
System.out.println("【websocket消息】连接断开,总数为:"+webSockets.size());
}
@OnMessage
public void onMessage(String message) {
System.out.println("【websocket消息】收到客户端消息:"+message);
}
// 此为广播消息
public void sendAllMessage(String message) {
for(MyWebSocket webSocket : webSockets) {
System.out.println("【websocket消息】广播消息:"+message);
try {
webSocket.session.getAsyncRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
// 此为单点消息 (发送文本)
public void sendTextMessage(String key, String message) {
Session session = sessionPool.get(key);
if (session != null) {
try {
session.getBasicRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
最后,前端页面
前端,方法可以自由定义什么时候创建链接,我是直接页面初始化就创建链接
<template>
<a-card>
<div>
<h1>测试webSocket</h1>
<button @click="send">点击请求后台数据</button>
<button @click="onClose">关闭连接</button>
</div>
</a-card>
</template>
<script>
export default {
created() {
// 页面创建生命周期函数
this.initWebSocket();
},
methods: {
onClose(){
this.websock.close();
},
initWebSocket() {
if ("WebSocket" in window) {
// WebSocket与普通的请求所用协议有所不同,ws等同于http,wss等同于https
//d5533相当于我这台客户端的标识,key,用来单客户端通话
this.websock = new WebSocket(
"ws://localhost:8010/websocket/d5533"
);
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onmessage = this.websocketonmessage;
this.websock.onclose = this.websocketclose;
} else {
alert("not error 不支持websocket");
}
},
//连接回调
websocketonopen() {
console.log("WebSocket连接成功");
},
//发生错误回调
websocketonerror(e) {
console.log("WebSocket连接发生错误");
},
//接收到消息的回调函数
websocketonmessage(e) {
console.log(e.data); // console.log(e);
},
// 连接关闭时的回调函数
websocketclose(e) {
console.log("connection closed (" + e + ")");
},
send() {
this.websock.send('后台你好,我是前端');
}
}
};
</script>
<style lang="less" scoped>
</style>
到这里,就完成了一个简单的WebSocket就搭建完成了,可以进行前后端互相通话,大家快动手试试吧。
关注公众号,不定期干货噢