SpringBoot中整合WebSockets实现前后端之间

　　前言
　　我们在开发时，经常需要在前后端之间传递信息。前端的变化要通知给后端，反之，后端的数据更新也要及时通知给前端。那什么样的技术，可以确保前后端之间的高效稳定通信呢？今天壹哥就带各位学习WebSockets，实现前后端之间的通信。一。WebSockets简介1。什么是Websockets
　　WebSocket是HTML5提供的一种新的网络通信协议。它实现了服务端与客户端的全双工通信，建立在传输层TCP协议之上，即浏览器与服务端需要先建立TCP协议，再发送WebSocket连接建立请求。2。为什么要有WebSockets
　　既然网络通信已经有了http协议，为什么还需要WebSocket协议呢？
　　这是因为http协议有一个缺陷，通信只能由客户端发起请求，服务器端返回查询结果。
　　比如说我们想要获取一个实时的新闻信息，在每次更新新闻信息后，我们都需要刷新页面才能获取到最新的信息，只有再次发起客户端请求，服务器端才会返回结果。但是服务器端不能做到推送消息给客户端，当然我们可以使用轮询，查看服务器有没有新的消息，比如聊天室这样的，但是轮询效率是非常低的，因此WebSocket就这样产生了。
　　3。WebSocket创建连接过程
　　客户端发送请求信息，服务端接收到这个请求并返回响应信息。
　　当连接建立后，客户端发送http请求时，通过Upgrade：webSocketConnection：Upgrade告知服务器需要建立的是WebSocket连接，并且还会传递WebSocket版本号、协议的字版本号、原始地址、主机地址，WebSocket相互通信的Header很小，大概只有2Bytes。
　　4。WebSocket的优点
　　WebSocket的最大优点就是服务器可以主动向客户端推送消息，客户端也可以主动向服务器端发送消息。
　　使用WebSockets可以在服务器与客户端之间建立一个非http的双向连接。这个连接是实时的，也是永久的（除非被关闭）。
　　当服务器想向客户端发送数据时，可以立即将数据推送到客户端的浏览器中，无需重新建立链接，只要客户端有一个被打开的socket（套接字）并且与服务器建立链接，服务器就可以把数据推送到这个socket上。5。WebSocket的前端API5。1建立连接
　　WebSocket需要接收一个url参数，然后调用WebSocket对象的构造器来建立与服务器之间的通信链接。
　　如下代码初始化：varwebsocketnewWebSocket（wss：echo。websocket。org）；复制代码注：
　　URL字符串必须以ws或wss（加密通信）开头。
　　利用上面的代码，我们的通信连接建立之后，就可以进行客户端与服务器端的双向通信了。可以使用WebSocket对象的send方法对服务器发送数据，但是只能发送文本数据（我们可以使用JSON对象把任何js对象转换成文本数据后再进行发送）。5。2发送消息的方法websocket。send（data）；复制代码5。3接收服务器传过来的数据
　　通过onmessage事件来接收服务器传过来的数据，如下代码：websocket。onmessagefunction（event）｛vardataevent。data；｝复制代码5。4监听socket的打开事件
　　通过获取onopen事件来监听socket的打开事件。如下代码：websocket。onopenfunction（event）｛开始通信时的处理｝复制代码5。5监听socket的关闭事件
　　通过获取onclose事件来监听socket的关闭事件。如下代码：websocket。onclosefunction（event）｛通信结束时的处理｝复制代码5。6关闭socket
　　通过close方法来关闭socket，如下代码：websocket。close（）；复制代码5。6WebSocket的状态
　　可以通过读取readyState的属性值来获取WebSocket对象的状态，readyState属性存在以下几种属性值。CONNECTING（数字值为0），表示正在连接；OPEN（数字值为1），表示已建立连接；CLOSING（数字值为2），表示正在关闭连接；CLOSED（数字值为3），表示已关闭链接。二。SpringBoot2。x整合WebSockets1。创建Web项目
　　我们按照之前的经验，创建一个Web项目，并将之改造成SpringBoot项目，具体过程略。
　　2。添加依赖包
　　在pom。xml文件中添加核心依赖包。dependencygroupIdorg。springframework。bootgroupIdspringbootstarterwebsocketartifactIddependencydependencygroupIdorg。springframework。bootgroupIdspringbootstarterthymeleafartifactIddependencydependencygroupIdcom。alibabagroupIdfastjsonartifactIdversion1。2。46versiondependency复制代码3。创建WebSocket配置文件
　　我们创建一个配置类，开启对WebSockets的支持。packagecom。yyg。boot。config；importorg。springframework。context。annotation。Bean；importorg。springframework。context。annotation。Configuration；importorg。springframework。web。socket。server。standard。ServerEndpointExporter；Author一一哥SunDateCreatedin2020513DescriptionDescriptionConfigurationpublicclassWebSocketConfig｛BeanpublicServerEndpointExporterserverEndpointExporter（）｛returnnewServerEndpointExporter（）；｝｝复制代码4。创建WebSockets的Server端
　　接着我们要创建WebSeckets服务端的配置代码，这是通信的核心。packagecom。yyg。boot。websockets；importcom。alibaba。fastjson。JSON；importcom。alibaba。fastjson。JSONObject；importlombok。extern。slf4j。Slf4j；importorg。springframework。stereotype。Component；importorg。springframework。util。StringUtils；importjavax。websocket。；importjavax。websocket。server。PathParam；importjavax。websocket。server。ServerEndpoint；importjava。io。IOException；importjava。util。concurrent。ConcurrentHashMap；Author一一哥SunDateCreatedin2020513DescriptionDescriptionComponentServerEndpoint（server｛uid｝）Slf4jpublicclassWebSocketServer｛用来记录当前在线连接数量，应该把它设计成线程安全的。privatestaticintonlineCount0；concurrent包是线程安全的Set，用来存放每个客户端对应的WebSocket对象。privatestaticConcurrentHashMapString，WebSocketServerwebSocketMapnewConcurrentHashMap（）；与某个客户端的连接会话，需要通过它来给客户端发送数据。privateSessionsession；接收客户端消息的uidprivateStringuid；连接建立成功调用的方法OnOpenpublicvoidonOpen（Sessionsession，PathParam（uid）Stringuid）｛this。sessionsession；this。uiduid；if（webSocketMap。containsKey（uid））｛webSocketMap。remove（uid）；加入到set中webSocketMap。put（uid，this）；｝else｛加入set中webSocketMap。put（uid，this）；在线数加1addOnlineCount（）；｝log。info（用户连接：uid，当前在线人数为：getOnlineCount（））；try｛sendMsg（连接成功）；｝catch（IOExceptione）｛log。error（用户：uid，网络异常！！！！！！）；｝｝连接关闭调用的方法OnClosepublicvoidonClose（）｛if（webSocketMap。containsKey（uid））｛webSocketMap。remove（uid）；从set中删除subOnlineCount（）；｝log。info（用户退出：uid，当前在线人数为：getOnlineCount（））；｝收到客户端消息后调用的方法parammessage客户端发送过来的消息OnMessagepublicvoidonMessage（Stringmessage，Sessionsession）｛log。info（用户id：uid，接收到的报文：message）；可以群发消息消息保存到数据库、redisif（！StringUtils。isEmpty（message））｛try｛解析发送的报文JSONObjectjsonObjectJSON。parseObject（message）；追加发送人（防止串改）jsonObject。put（fromUID，this。uid）；StringtoUIDjsonObject。getString（toUID）；传送给对应的toUserId用户的WebSocketif（！StringUtils。isEmpty（toUID）webSocketMap。containsKey（toUID））｛webSocketMap。get（toUID）。sendMsg（jsonObject。toJSONString（））；｝else｛若果不在这个服务器上，可以考虑发送到mysql或者redislog。error（请求的UserId：toUID不在该服务器上）；｝｝catch（Exceptione）｛e。printStackTrace（）；｝｝｝处理错误OnErrorpublicvoidonError（Sessionsession，Throwableerror）｛log。error（用户错误：this。uid，原因：error。getMessage（））；error。printStackTrace（）；｝实现服务器主动推送privatevoidsendMsg（Stringmsg）throwsIOException｛this。session。getBasicRemote（）。sendText（msg）；｝发送自定义消息publicstaticvoidsendInfo（Stringmessage，PathParam（uid）Stringuid）throwsIOException｛log。info（发送消息到：uid，发送的报文：message）；if（！StringUtils。isEmpty（uid）webSocketMap。containsKey（uid））｛webSocketMap。get（uid）。sendMsg（message）；｝else｛log。error（用户uid，不在线！）；｝｝privatestaticsynchronizedintgetOnlineCount（）｛returnonlineCount；｝privatestaticsynchronizedvoidaddOnlineCount（）｛WebSocketServer。onlineCount；｝privatestaticsynchronizedvoidsubOnlineCount（）｛WebSocketServer。onlineCount；｝｝复制代码5。创建Controller接口
　　编写一个Controller，定义出通信的接口。packagecom。yyg。boot。web；importcom。yyg。boot。websockets。WebSocketServer；importorg。springframework。http。ResponseEntity；importorg。springframework。web。bind。annotation。GetMapping；importorg。springframework。web。bind。annotation。PathVariable；importorg。springframework。web。bind。annotation。RequestMapping；importorg。springframework。web。bind。annotation。RestController；importorg。springframework。web。servlet。ModelAndView；importjava。io。IOException；Author一一哥SunDateCreatedin2020513DescriptionDescriptionRestControllerpublicclassWebSocketController｛GetMapping（page）publicModelAndViewpage（）｛returnnewModelAndView（webSocket）；｝RequestMapping（push｛toUID｝）publicResponseEntityStringpushToClient（Stringmessage，PathVariableStringtoUID）throwsIOException｛WebSocketServer。sendInfo（message，toUID）；returnResponseEntity。ok（SendSuccess！）；｝｝复制代码6。创建前端页面发送消息
　　编写前端页面，向后端发送通信请求。！DOCTYPEhtmlhtmlheadmetacharsetutf8titleWebSocket通讯titleheadbodyp【uid】：inputiduidnameuidtypetextvalue5p【toUID】：inputidtoUIDnametoUIDtypetextvalue10p【Msg】：inputidmsgnamemsgtypetextvaluehelloWebSocketp【第一步操作：】：buttononclickopenSocket（）开启socketbuttonp【第二步操作：】：buttononclicksendMessage（）发送消息buttonbodyhtml复制代码7。配置application。yml
　　在application。yml配置文件中，对我们的项目进行必要的配置。server：port：8080servlet：contextpath：socketspring：http：encoding：force：truecharset：UTF8application：name：websocketdemofreemarker：requestcontextattribute：requestprefix：templatessuffix：。htmlcontenttype：texthtmlenabled：truecache：falsecharset：UTF8allowrequestoverride：falseexposerequestattributes：trueexposesessionattributes：trueexposespringmacrohelpers：true复制代码8。创建入口类
　　最后创建一个项目入口类，启动项目。packagecom。yyg。boot；importorg。springframework。boot。SpringApplication；importorg。springframework。boot。autoconfigure。SpringBootApplication；Author一一哥SunDateCreatedin2020513DescriptionDescriptionSpringBootApplicationpublicclassSocketApplication｛publicstaticvoidmain（String〔〕args）｛SpringApplication。run（SocketApplication。class，args）；｝｝复制代码9。完整项目结构
　　此时完整的项目结构如下图所示，大家可以参考创建。
　　三。启动项目进行测试1。测试page接口
　　我们需要在浏览器中打开另个页面，网址都是：
　　http：localhost：8080socketpage
　　2。发送消息
　　首先我们在第一个页面中，输入如下参数信息，点击发送消息按钮：
　　可以看到Console控制台显示的日志信息。然后我们去Intellijidea中看看后台打印的日志信息：
　　3。再次发送消息
　　然后我们在第二个页面中，输入如下参数信息，点击发送消息按钮：
　　然后我们去Intellijidea中看看后台打印的日志信息：
　　4。返回之前页面
　　接着我们回到第一个页面，可以看到log中展示了如下信息：
　　说明接收到了从另一个客户端发来的信息。如果在第一个页面中再次点击发送信息的按钮，同样的在第二个页面中可以收到日志信息：
　　至此，我们就实现了WebSocket通信。结语
　　经过上面的一系列代码，我们就实现了前后端之间的通信。现在你有么有学会WebSocket的使用呢？
　　原文链接：https：juejin。cnpost7177139309856686139