开发中有很多需求会用到后端异步通知前端实现消息通知,实现方式有很多种,这里简单说下 SpringBoot 整合 websocket 实现后台向前端推送信息简单实现,希望对你有用。
1、maven 依赖的引入
<!-- webSocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2、spring 中注入 @ServerEndpoint 创立 websocket endpoint
在你的 Booter 启动类里加入:
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
3、接下来就是写 websocket 的具体实现类,很简单,直接上代码:
@ServerEndpoint("/websocket/link")
@Component
public class WebSocket {
private static Logger log = LoggerFactory.getLogger(WebSocket.class);
// concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<WebSocket>();
// 与某个客户端的连接会话,需要通过它来给客户端发送数据
private Session session;
/**
* 连接建立成功调用的方法
*/
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketSet.add(this); // 加入set中
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this); // 从set中删除
}
/**
* 收到客户端消息后调用的方法
*
* @param message
* 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message, Session session) {
log.info("收到来自窗口的信息:" + message);
}
/**
* 发生错误
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error("发生错误");
error.printStackTrace();
}
/**
* 实现服务器主动推送
*/
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
/**
* 群发自定义消息
*/
public static void sendInfo(String string) throws IOException {
log.info("推送消息到窗口" + string);
for (WebSocket item : webSocketSet) {
try {
item.sendMessage(string);
} catch (IOException e) {
continue;
}
}
}
}
4、开始测试,真的很简单
@Controller
@RequestMapping("/testWebsocket")
public class TestWebsocket {
@ResponseBody
@RequestMapping("/testWebsocket")
public ResponseBean send() {
try {
WebSocket.sendInfo("");
return ResponseBean.success("发送成功");
} catch (IOException e) {
e.printStackTrace();
return ResponseBean.fail("发送失败");
}
}
}
5、前端代码
var socket;
if (typeof (WebSocket) == "undefined") {
console.log("遗憾:您的浏览器不支持WebSocket");
} else {
console.log("恭喜:您的浏览器支持WebSocket");
//实现化WebSocket对象
//指定要连接的服务器地址与端口建立连接
//注意ws、wss使用不同的端口。我使用自签名的证书测试,
//无法使用wss,浏览器打开WebSocket时报错
//ws对应http、wss对应https。
//socket = new WebSocket("ws://localhost:8082/websocket/link");
var host = location.host;//获取主机名+端口号
socket = new WebSocket("ws://" + host + "/websocket/link");
//连接打开事件
socket.onopen = function() {
console.log("Socket 已打开");
};
//收到消息事件
socket.onmessage = function(msg) {
console.log("收到服务器消息事件 ...刷新完成.....", msg);
};
//连接关闭事件
socket.onclose = function() {
console.log("Socket已关闭");
};
//发生了错误事件
socket.onerror = function() {
console.log("Socket发生了错误");
}
//窗口关闭时,关闭连接
window.unload = function() {
socket.close();
};
}
6、测试效果图如下
页面显示
![9d38b146d1f073a52c85558070c474d1.png](https://i-blog.csdnimg.cn/blog_migrate/8762c2fc83c99a06bf7867a19cdfd4d7.png)
如下是打印返回的日志信息
![7854be767f5d137913015a69f578dbe9.png](https://i-blog.csdnimg.cn/blog_migrate/e7799fecbac747764e91708d2346db57.png)
总结:按照上面步骤实现起来很简单,具体实现需要根据自己的需求来分析,有兴趣的可以试试。
码字不易,转载请注明出处。