springboot整合websocket
前言
WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
springboot项目如何使用websocket
使用websocket非常简单,下面分成四个部分讲解
1.导入依赖
<!--websocket-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2.配置websocket
@Configuration //配置类交个spring管理
public class WebSocketConfig {
//websocket需要的bean
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
3.后台使用websocket
后端的websocket主要有一下方法组成
1.onOpen 建立连接(保持连接)时,用于推送消息
2.onClose 连接关闭时
3.onMessage 收到到消息时
4.onError 发生错误时
下面的代码只用于演示进度条的进度值推送
当然我这里用到了自己写的WebSocketDto
用于传输进度值
public class WebSocketDto {
private static Lock lock = new ReentrantLock();
public volatile static int process=0;
public static boolean errorStatus=false;
public static void addprocess(){
lock.lock();
try {
System.out.println("addprocess得到锁");
WebSocketDto.process+=1;
} catch (Exception e) {
e.printStackTrace();
} finally {
lock.unlock();//释放锁
}
}
public static void zeroprocess(){
lock.lock();
try {
System.out.println("zero得到锁");
WebSocketDto.process=0;
} catch (Exception e) {
e.printStackTrace();
} finally {
lock.unlock();
}
}
}
这里正式开始后台websocket代码
@ServerEndpoint("/clientoneWsSocket") //自定义的服务名
@Service
public class WebSocketController {
//建立连接推送消息
@OnOpen
public void onOpen(Session session){
while (true) {
synchronized (session){
// 发送消息到页面
// this.sendMessage(session, WebSocketDto.autidinfo);
if(WebSocketDto.process<100){
if(WebSocketDto.process==1){
try {
Thread.sleep(500);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
WebSocketDto.addprocess();
}
this.sendMessage(session,WebSocketDto.process+"");
//如果推送发生错误就会断开连接
if(WebSocketDto.errorStatus){
// 状态复原
WebSocketDto.errorStatus=false;
break;
}
if(WebSocketDto.process==100){
// 将状态复原
WebSocketDto.zeroprocess();
}
try {
Thread.sleep(100);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
@OnClose
public void onClose() {
}
@OnMessage
public void onMessage(String message,Session session) throws IOException {
System.out.println(message);
this.sendMessage(session,"后台收到了你的消息:"+message);
}
@OnError
public void onError(Session session, Throwable error) {
System.out.println(session+"/");
}
//发送消息
public void sendMessage(Session session, String msg){
try {
session.getBasicRemote().sendText(msg);
} catch (Exception e) {
// e.printStackTrace();
System.out.println("信息推送已关闭连接"+e.getMessage());
//改变状态
WebSocketDto.errorStatus=true;
}
}
}
4.前端使用websocket
使用javascript书写和后端也相差不大,看代码吧
if ("WebSocket" in window)
{
// alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://127.0.0.1:8081/clientoneWsSocket");
ws.onopen = function()
{
// Web Socket 已连接上,使用 send() 方法发送数据
ws.send("我是前端页面");
// alert("数据发送中...");
};
ws.onmessage =async (evt)=>
{
//接收到的数据
var received_msg = evt.data;
// console.log(received_msg);
let af=parseInt(received_msg);
//由于我这里使用的时vue 所以可以直接对进度条赋值,如果你使用的时常规的js,那么就需要获取dom进行赋值操作
this.processval=af;
};
ws.onclose = function()
{
// 关闭 websocket
alert("连接已关闭...");
};
}else{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!,无法实时推送新消息");
}
钉完毕,看下结果吧