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中的简单使用。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181217G1B3ED00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券