SpringBoot-系列二：使用websocket

SpringBoot-2.1.1系列二：使用websocket

1.什么是websocket？

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

2.为什么需要使用websocket？

之前游览器想获取服务器数据，只有不断发起请求，轮询获取。既效率低下，数据时效性也得不到保障。如果服务器能主动向客户端推送消息，这样就完美了。在这种想法下，websocket诞生了！

3.怎样使用websocket？

3.1.使用maven引入jar依赖

org.springframework.boot

spring-boot-starter-websocket

3.2.编写配置类

首先创建服务器端点bean

@Bean

publicServerEndpointExporterserverEndpointExporter() {

returnnewServerEndpointExporter();

}

再编写具体的端点请求处理类

packagecom.chenyuwen.demo;

importorg.slf4j.Logger;

importorg.slf4j.LoggerFactory;

importorg.springframework.stereotype.Component;

importjavax.websocket.*;

importjavax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket")

@Component

publicclassWebSocket{

privatestaticfinalLoggerlog=LoggerFactory.getLogger(WebSocket.class);

/**

* 连接建立成功调用的方法

*/

@OnOpen

publicvoidonOpen(Sessionsession) {

log.info("创建连接");

}

/**

* 连接关闭调用的方法

*/

@OnClose

publicvoidonClose() {

log.info("连接关闭");

}

/**

* 收到客户端消息后调用的方法

*

* @param message 客户端发送过来的消息

*/

@OnMessage

publicvoidonMessage(Sessionsession,Stringmessage) {

log.info("收到消息：{}",message);

}

/**

* 发生错误时调用

*

* @param session

* @param error

*/

@OnError

publicvoidonError(Sessionsession,Throwableerror) {

log.error("发生错误",error);

}

}

3.3.前端js编写

My WebSocket

Welcome

Send

Close

varwebsocket=null;

//判断当前浏览器是否支持WebSocket

if('WebSocket'inwindow) {

//使用http只需ws://,使用https则为wss://

websocket=newWebSocket("wss://localhost/websocket");

}else{

alert('Not support websocket')

}

//连接发生错误的回调方法

websocket.onerror=function() {

setMessageInnerHTML("error");

};

//连接成功建立的回调方法

websocket.onopen=function(event) {

setMessageInnerHTML("open");

}

//接收到消息的回调方法

websocket.onmessage=function(event) {

setMessageInnerHTML(event.data);

}

//连接关闭的回调方法

websocket.onclose=function() {

setMessageInnerHTML("close");

}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

window.onbeforeunload=function() {

websocket.close();

}

//将消息显示在网页上

functionsetMessageInnerHTML(innerHTML) {

document.getElementById('message').innerHTML+=innerHTML+'

';

}

//关闭连接

functioncloseWebSocket() {

websocket.close();

}

//发送消息

functionsend() {

varmessage=document.getElementById('text').value;

websocket.send(message);

}

3.4.查看效果

当我们进入页面时，控制台会输出：

当我们输入“hello world！”并点击“Send”发送时：

控制台会输出：

当点击“Close”关闭连接时：

以上即实现了websocket在springboot中的简单使用。