其他分享
首页 > 其他分享> > spring boot 集成websocket

spring boot 集成websocket

作者:互联网

第一步:导入依赖

org.springframework.boot
spring-boot-starter-websocket

相比前面的章节,新增了websocket的依赖。

编写后端:
第二步:编写WebSocketConfig配置类

@Configuration
public class WebSocketConf {

    @Bean
    public ServerEndpointExporter serverEndpoint(){
        return new ServerEndpointExporter();
    }

}

第三步:编写WebSocket类
//注册成组件
@Component
//定义websocket服务器端,它的功能主要是将目前的类定义成一个websocket服务器端。注解的值将被用于监听用户连接的终端访问URL地址
@ServerEndpoint("/websocket")
//如果不想每次都写private final Logger logger = LoggerFactory.getLogger(当前类名.class); 可以用注解@Slf4j;可以直接调用log.info
@Slf4j
public class WebSocket {

//实例一个session,这个session是websocket的session
private Session session;

//存放websocket的集合(本次demo不会用到,聊天室的demo会用到)
private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet<>();

//前端请求时一个websocket时
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketSet.add(this);
log.info("【websocket消息】有新的连接, 总数:{}", webSocketSet.size());
}

//前端关闭时一个websocket时
@OnClose
public void onClose() {
webSocketSet.remove(this);
log.info("【websocket消息】连接断开, 总数:{}", webSocketSet.size());
}

//前端向后端发送消息
@OnMessage
public void onMessage(String message) {
log.info("【websocket消息】收到客户端发来的消息:{}", message);
}

//新增一个方法用于主动向客户端发送消息
public static void sendMessage(String message) {
for (WebSocket webSocket: webSocketSet) {
log.info("【websocket消息】广播消息, message={}", message);
try {
webSocket.session.getBasicRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
有关方法和参数的描述代码里有简单写到。

第四步:改造控制器
编写一个接口方法,调用websocket的sendMessage方法,如下:

我是写在以前的codeController里面的,先注入websocket,再新增一个接口方法,如下:

ApiOperation注解是整合的swagger后的注解,没有跟着前面的章节整合不需要加,为了显示效果,我增加了一个线程睡眠0.1秒再累加,返回前端。

注意:若前面跟着一起整合了token,直接访问该接口不行,要么请求时带上登录接口返回的token,要么放行该接口,为了简单,此处我直接放行的该接口,若未整合token,则不需要管,放行方式如下:

在该配置类下面的该方法增加如图所示(未整合token不需要管)。

到此后端完毕,开始编写前端代码。

编写前端:
第五步:编写前端代码

<html> <head> <title>进度条</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <div class="progress" style="width: 60%;height: 60px;margin: 0 auto;margin-top: 150px;"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div id="message"></div> <input type="button" name="" id="btn" value="开始" /> </body> 解释:

1、

var websocket = null;

//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
websocket = new WebSocket("ws://localhost:8089/websocket");
}else{
alert('Not support websocket')
}

首先建立websocket连接。

注意:此处的地址的ws://是固定写法,后面加上你的ip+端口+WebSocket的ServerEndpoint注解配置的路径。

2、

//连接发生错误的回调方法
websocket.onerror = function(){
setMessageInnerHTML("发生错误");
};

//连接成功建立的回调方法
websocket.onopen = function(event){
setMessageInnerHTML("建立连接");
}

//接收到消息的回调方法
websocket.onmessage = function(event){
console.log(event.data)
// setMessageInnerHTML(event.data);
$(".progress-bar").attr("style","width:"+event.data+"%")
}

//连接关闭的回调方法
websocket.onclose = function(){
setMessageInnerHTML("关闭连接");
}

都是websocket的固定写法,几个回调函数。

3、

//开始
$("#btn").click(function(){
$.ajax({
url: "http://localhost:8089/codeController/jinDuTiao",
type:'post',
success: function(HTML) {//返回页面内容
console.log(HTML);
}
});
})

开始按钮,开始请求接口。

注意:此处为了样式好看点,我导入了bootstrap。运行服务,打开网页,会自动建立websocket连接,点击开始。

第六步:演示

第七步:改造
为了体现后端主动向服务器传数据,新增一个接口,如下:

将上面那个接口改成新增成一个定时执行的,会发现,不点击前端的开始按钮,也会有效果,说明后端可以主动向客户端发送数据。

到此,整合完毕。

本期整合到此完毕,接下来会继续更新加强整合,尽情期待。

标签:websocket,log,spring,boot,接口,session,WebSocket,public
来源: https://www.cnblogs.com/cfas/p/16445035.html