一、前言本节简单介绍下如何在Spring Boot引入WebSocket实现简单的客户端与服务端建立长连接并互发送文本消息。二、框架搭建2.1 依赖引入dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId/dependency2.2 构建服务端新建handler包然后在该包下新建MyStringWebSocketHandler继承TextWebSocketHandlerComponentSlf4jpublicclassMyStringWebSocketHandlerextendsTextWebSocketHandler{OverridepublicvoidafterConnectionEstablished(WebSocketSessionsession){log.info(和客户端建立连接);}OverridepublicvoidhandleTransportError(WebSocketSessionsession,Throwableexception)throwsException{session.close(CloseStatus.SERVER_ERROR);log.error(连接异常,exception);}OverridepublicvoidafterConnectionClosed(WebSocketSessionsession,CloseStatusstatus)throwsException{super.afterConnectionClosed(session,status);log.info(和客户端断开连接);}OverrideprotectedvoidhandleTextMessage(WebSocketSessionsession,TextMessagemessage)throwsException{// 获取到客户端发送过来的消息StringreceiveMessagemessage.getPayload();log.info(receiveMessage);// 发送消息给客户端session.sendMessage(newTextMessage(fakeAi(receiveMessage)));// 关闭连接// session.close(CloseStatus.NORMAL);}privatestaticStringfakeAi(Stringinput){if(inputnull||.equals(input)){return你说什么没听清;}returninput.replace(你,我).replace(吗,).replace(?,!).replace(,);}}该类重写了父类AbstractWebSocketHandler的四个方法afterConnectionEstablished和客户端链接成功的时候触发该方法handleTransportError和客户端连接失败的时候触发该方法afterConnectionClosed和客户端断开连接的时候触发该方法handleTextMessage和客户端建立连接后处理客户端发送的请求。此外因为我们的目的是实现和客户端的通信并且内容为文本内容所以我们继承的是TextWebSocketHandler如果传输的是二进制内容则可以继承BinaryWebSocketHandler更多信息可以自行查看WebSocketHandler的子类。2.3 配置类接着新建config包然后在该包下新建WebSocketServerConfigure配置类ConfigurationEnableWebSocketpublicclassWebSocketServerConfigureimplementsWebSocketConfigurer{AutowiredprivateMyStringWebSocketHandlermyStringWebSocketHandler;OverridepublicvoidregisterWebSocketHandlers(WebSocketHandlerRegistrywebSocketHandlerRegistry){webSocketHandlerRegistry.addHandler(myStringWebSocketHandler,/connect).withSockJS();}}EnableWebSocket用于开启WebSocket相关功能我们注入了上面创建的MyStringWebSocketHandler并将其注册到了WebSocketHandlerRegistry。上面代码的含义是当客户端通过/connecturl和服务端连接通信时使用MyStringWebSocketHandler处理会话。withSockJS的含义是通信的客户端是通过SockJS实现的下面会介绍到。三、构建客户端SockJS是一个JS插件用于构建WebSocket兼容性好。在resources目录下新建static包然后在该包下新建client.html!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8titleWebSocket客户端/titlescriptsrchttps://cdn.bootcss.com/sockjs-client/0.3.4/sockjs.min.js/scriptlinkhrefhttps://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.cssrelstylesheet/headbodystyle.jumbotron{width:100%;}#text{height:3rem;font-size:1rem;line-height:3rem;margin:1rem;}.btn{margin-right:5px;}#connect{margin-left:1rem;}#log{margin:1rem 0 0 1rem;}/styledivclasscontainerdivclassrowdivclassjumbotroninputtypetextplaceholder请输入你想传输的内容idtextclasscol-lg-12/inputtypebuttonvalue连接classbtn btn-infoidconnectonclickconnect()/inputtypebuttonvalue发送classbtn btn-successidsentdisableddisabledonclicksent()/inputtypebuttonvalue断开classbtn btn-dangeriddisconnectdisableddisabledonclickdisconnect()/dividlogp聊天记录:/p/div/div/div/divscripttypetext/javascriptlettextdocument.querySelector(#text);letconnectBtndocument.querySelector(#connect);letsentBtndocument.querySelector(#sent);letdisconnectBtndocument.querySelector(#disconnect);letlogDivdocument.querySelector(#log);letwsnull;functionconnect(){lettargetUri/connect;wsnewSockJS(targetUri);ws.onopenfunction(){setConnected(true);log(和服务端连接成功);};ws.onmessagefunction(event){log(服务端说event.data);};ws.onclosefunction(){setConnected(false);log(和服务端断开连接)}}functionsent(){if(ws!null){ws.send(text.value);log(客户端说text.value);}else{log(请先建立连接)}}functiondisconnect(){if(ws!null){ws.close();wsnull;}setConnected(false);}functionlog(value){letcontentdocument.createElement(p);content.innerHTMLvalue;logDiv.appendChild(content);text.value;}functionsetConnected(connected){connectBtn.disabledconnected;disconnectBtn.disabled!connected;sentBtn.disabled!connected;}/script/body/htmlhtmlcss那些都不重要重要的是我们引入了SockJS库。在connect()方法中我们通过new SockJS(/connect)和上面的服务端建立了Socket通信。SockJS对象包含几个常用的实用方法onopen和服务端讲了连接后的回调方法onmessage服务端返回消息时的回调方法onclose和服务端断开连接的回调方法send发送消息给服务端close断开和服务端的连接。上面的JS较为简单其他逻辑自己看看吧。四、通信测试启动项目浏览器访问http://localhost:8080/client.html
