以下是一个用Vue+SpringBoot+SprringCloud+Nacos写的一个WebSocket推送消息,一个是客户端,一个是服务端。
举一个简单的推送例子:当两个人登录网站买西游记书,两边都是显示的100本书,当其中一个购买了一本后,后端就调用websocket给前端所有登录网站的人发送消息说已经出售了一本,前端收到消息后就让所有人重新查询所有,自动刷新数量,方便购买。
客户端如下:
我把它写在了初始化页面完成后,首先判断浏览器支不支持websocket,随后便和后端建立连接,当你关闭这个页面后连接也会随之关闭,当收到后端发送过来的消息时,你可以写一些事件,比如:弹窗,放音乐等操作
mounted() {
var websocket = null;
if('WebSocket' in window){
websocket = new WebSocket('ws://路径/webSocket')
}else{
this.$message.error("该浏览器不支持websocket")
}
websocket.onopen = function(event){
console.log('建立连接')
}
websocket.onclose = function(event){
console.log('连接关闭')
}
websocket.onmessage = (event)=>{
console.log('收到消息:'+event.data)
}
websocket.onerror = function(){
this.$message.error("websocket通信发生错误")
}
websocket.onbeforeunload = function(){
websocket.close();
}
},
服务端如下:
先创建一个配置文件,如下:
package com.czxy.config;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Component
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
WebSocket类,如下: 每一个session都是一个用户,把所有登录了本网站的用户都存到了websocketSet中,第一个方法是建立连接,把当前连接的用户存放进去,第二个方法是退出本网站后从websocketSet中删除当前退出的用户,第三个方法就是给前端发送消息,比如:在登陆校验成功后调用WebSocket的sendMessage()方法,然后前端在做出一系列的操作
package com.czxy.service;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.client.WebSocketClient;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.CopyOnWriteArraySet;
@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket {
private Session session;
private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this);
log.info("【websocket消息】 有新的连接,总数:{}",webSocketSet.size());
}
@OnClose
public void onClose(){
webSocketSet.remove(this);
log.info("【websocket消息】 连接断开,总数:{}",webSocketSet.size());
}
@OnMessage
public void sendMessage(String message){
for (WebSocket webSocket : webSocketSet) {
log.info("【websocket消息】 广播消息,message={}"+message);
try{
webSocket.session.getBasicRemote().sendText(message);
}catch(Exception e){
e.printStackTrace();
}
}
}
}
|