SpringBoot+webSocket+Vue设置后台向前端推送消息
应⽤场景介绍：
在页⾯的数据需要实时刷新的时候，或者在页⾯需要接收后台的消息时候，如果采⽤前端轮询会造成资源占⽤较⼤，并且数据刷新也是不及时的，⽐如当我后台在监听MQ的消息时候，当从MQ监听到消息后我需要将MQ消息推送到前端实时展⽰，这时候就需要⽤到webSocket了。
1.⾸先搭建⼀个SpringBoot的项⽬，这⾥我就不重复了，然后引⼊jar包
<!-- WebSocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
<version>2.1.0.RELEASE</version>
</dependency>
2、编写websocketConfig配置类
import t.annotation.Bean;
import t.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* @Author dingchengxiang
* @Description //TODO WebSocket配置类
* @Date 15:53 2019/11/11
* @Param
* @return
**/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
3.websocket的实现类
slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import urrent.CopyOnWriteArraySet;
@Component
@ServerEndpoint("/push/websocket")
@Slf4j
public class WebSocketServer {
//静态变量，⽤来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
//concurrent包的线程安全Set，⽤来存放每个客户端对应的MyWebSocket对象。
private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
//与某个客户端的连接会话，需要通过它来给客户端发送数据
//与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
//接收sid
private String sid="";
/**
* 连接建⽴成功调⽤的⽅法*/
@OnOpen
public void onOpen(Session session,@PathParam("sid") String sid) {
this.session = session;
webSocketSet.add(this); //加⼊set中
addOnlineCount(); //在线数加1
log.info("有新窗⼝开始监听:"+sid+"，当前在线⼈数为" + getOnlineCount()); this.sid=sid;
/*try {
JSONString(RestResponse.success()));
} catch (IOException e) {
<("websocket IO异常");
}*/
}
/**
* 连接关闭调⽤的⽅法
*/
@OnClose
public void onClose() {
subOnlineCount(); //在线数减1
log.info("有⼀连接关闭！当前在线⼈数为" + getOnlineCount());
}
/**
* 收到客户端消息后调⽤的⽅法
*
* @param message 客户端发送过来的消息*/
@OnMessage
public void onMessage(String message, Session session) {
//log.info("收到来⾃窗⼝"+sid+"的信息:"+message);
if("heart".equals(message)){
try {
sendMessage("heartOk");
} catch (IOException e) {
e.printStackTrace();
}
}
}
前端websocket怎么用/
**
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
<("发⽣错误");
error.printStackTrace();
}
/**
* 实现服务器主动推送
*/
public void sendMessage(String message) throws IOException {
BasicRemote().sendText(message);
}
/**
/**
* 发⾃定义消息
* */
public static void sendInfo(String message) throws IOException {
for (WebSocketServer item : webSocketSet) {
try {
//这⾥可以设定只推送给这个sid的，为null则全部推送
// if(sid==null) {
item.sendMessage(message);
log.info("推送消息到窗⼝"+item.sid+"，推送内容:"+message);
// }else if(item.sid.equals(sid)){
// item.sendMessage(message);
// }
} catch (IOException e) {
continue;
}
}
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
}
public static synchronized void subOnlineCount() {
}
}
4、新增⼀个控制层接⼝作为测试接⼝能够调⽤的
/**
* @Author dingchengxiang
* @Description //TODO 测试websocket发送消息
* @Date 14:41 2019/11/12
* @Param []
* @return java.lang.String
**/
@PostMapping("/sendAllWebSocket")
public String test() {
String text="你们好！这是websocket体发送！";
try {
webSocketServer.sendInfo(text);
}catch (IOException e){
e.printStackTrace();
}
return text;
}
此处需要注意⼀下，后台可能与拦截需要将接⼝放开，本⼈是在shiroConfig中进⾏设置
5、编写前端vue的代码
先在这两处添加，
mounted () {
// WebSocket
if ('WebSocket' in window) {
this.websocket = new WebSocket('ws://localhost:8080/⾃⼰的项⽬地址/push/websocket') // alert('连接浏览器')
this.initWebSocket()
} else {
alert('当前浏览器不⽀持')
}
},
beforeDestroy () {
},
然后在⽅法中编写具体实现
methods: {
initWebSocket () {
// 连接错误
r = this.setErrorMessage
// 连接成功
pen = this.setOnopenMessage
// 收到消息的回调
ssage = this.setOnmessageMessage
// 连接关闭的回调
lose = this.setOncloseMessage
// 监听窗⼝关闭事件，当窗⼝关闭时，主动去关闭websocket连接，防⽌连接还没断开就关闭窗⼝，server端会抛异常。
},
setErrorMessage () {
console.log('WebSocket连接发⽣错误状态码：' + adyState)
},
setOnopenMessage () {
console.log('WebSocket连接成功状态码：' + adyState)
},
setOnmessageMessage (event) {
// 根据服务器推送的消息做⾃⼰的业务处理
console.log('服务端返回：' + event.data)
},
setOncloseMessage () {
console.log('WebSocket连接关闭状态码：' + adyState)
},
onbeforeunload () {
this.closeWebSocket()
},
closeWebSocket () {
this.websocket.close()
}
}
这个时候启动我们就可以看到效果了，页⾯控制台打印的值
后台控制台打印的值
到这⼀步基本的就已经实现了，但是我们现在要加⼊中间件MQ监听到消息后进⾏消息返回，那么还需要下⾯⼏步，6、MQ我在这个demo中没有集成，我就⽤⼀个定时任务来模拟MQ监听到消息以后的处理步骤。
新建⼀个Task类
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论