首先 pom.xml
<Arnal> <roupiD> org.springframework.boot </rougiD> <ArtifactId> Spring-Boot-Starter-Parent </stifactid> <splection> 1.5.8.Release </version> </parent> <sperence> <roupiD> org.apache.commons </groupid> <trofactid> rtifactid> </sependency> <reperency> <roupiD> javax.websocket </groupId> <StifactId> javax.websocket-api </stifactid> <sored> 1.0 </version> <scope> يتم توفيره </scope> </reperency> <sependency> <roupencid> org.springframework </group معرف> <StifactId> spring-websocket </artifactId> </sependency> <redency> <roupiD> org.springframework.boot </groupiD> <StifactId> spring-boot-starter-web </suntifactid> <SeartiD> GroupId> <StifactId> Spring-Boot-Starter-Tomcat </stifactid> </section> </stivalusions> </reperency> <redence> <roupiD> org.springframework.boot </groupid> <StifactId> spring-boot-undertow </restifactid>
接收消息后的处理类 GameHandler:
استيراد java.net.uri ؛ استيراد org.springframework.web.socket.binaryMessage ؛ استيراد org.springframework.web.socket.closestatus org.springframework.web.socket.websocketsession ؛ استيراد org.springframework.web.socket.handler.abstractwebsockethandler ؛ public clamehandler تمديد ustructionWebsOcketler { / ** * 处理字符串类的信息 * * @param session * @ @ @ @ @ رسالة TextMessage) يلقي الاستثناء {session.sendMessage (textMessage جديد (message.asbytes ())) ؛ } / ** * 处理二进制类的信息 * * param session * param message * athrows استثناء * / Override المقود الفراغ المحمي (جلسة WebSocketSession ، رسالة BinaryMessage) يلقي الاستثناء {session.sendMessage (new BinaryMessage (message.getPayload ())) ؛ } / ** * ping-pong * * param session * param message * throws استثناء * / override محمي void handlepongmessage (جلسة websocketsession ، رسالة pongmessage) يلقي استثناء {} / ** * 传出错误的处理 * * sessions session * @param استثناء * / @ @ } / ** * 连接关闭的处理 * * param session * param status * throws استثناء * / Override public void efterConnectionClosed (جلسة WebSocketSession ، حالة CloseStatus) يلقي استثناء {} / ** * 连接建立后的处理 * * param session * @throws stispion握手信息拦截器 WebsockethandShakeInterceptor:
استيراد java.util.map ؛ استيراد javax.servlet.http.cookie ؛ استيراد org.springframework.http.server.serverhttprequest org.springframework.http.server.servletserverhttprequest ؛ استيراد org.springframework.web.socket.websockethandler riperhandshake (serverhttprequest request ، serverhtpresponse sh1 ، websockethandler wsh ، map <string ، Object> statest) rems {// 此处可以做一些权限认证的事情或者其他 return true ؛ } Override public void extrashake (serverhtprequest shr ، serverhttpresponse sh1 ، websockethandler wsh ، excptn) {}}使用 WebSocket 的配置类 WebSocketConfig:
استيراد org.springframework.context.annotation.bean ؛ استيراد org.springframework.context.annotation.configuration ؛ استيراد org.springframework.web.servlet.config.annotation.webmvcconfiguradapter ؛ org.springframework.web.socket.config.annotation.enableWebSocket ؛ استيراد org.springframework.web.socket.annotation.websconteConterRegerregistry ؛ يمتد webmvcConfigureRadapter تنفذ websocketconfigurer {Override public void registerWebsockethandlers (سجل websockethandlerregistry) {// 允许连接的域 ، 只能以 http 或 https 开头 string [] "http: // localhost: 1213"} ؛ registry.addhandler (GameHandler () ، "/game"). addInterceptors (مصافحة:). } bean public GameHandler GameHandler () {return new GameHandler () ؛ } bean public websockethandshaKeInterceptor trainshakeInterceptor () {return new websockethandshakeInterceptor () ؛ }}قاذفة:
springbootapplicationpublicpublicpublic class {public static void main (string [] params) {springapplication.run (launcher.class ، params) ؛}}配置文件 الرئيسي/الموارد/التطبيق.
server.port = 1213server.session-timeout = 1800server.undertow.io-threads = 4server.undertow.worker-threads = 20server.undertow.buffer-size = 1024server.undertow.buffers-per-region = 1024server.dertow.direct-buffers =
前端的测试页面 الرئيسي/الموارد/ثابت/index.html
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-contably" content = "ie = edge"> <meta name = "viewport" content = "width width = 1" href = "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css href = "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theeme.min.css src = "https://cdn.bootcss.com/jquery/jquery src = "https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.6/pako.min.js Src = "https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js <style> #message {الارتفاع: 600px ؛ فائض y: Auto ؛ } </style> </head> <body> <viv> <h1> صفحة اختبار WebSocket </h1> <hr/> <viv> <viv> <label for = "wsaddr"> عنوان WebSocket: </label> <viv> <span id = "basic-ws"> ws: //127.0.1: 1213/</span> ariA-describedby = "basic-ws" placeholder = "game" data-container = "body" data-placement = "top" data-content = "链接地址不能为空 ، 请填写"> </div> </viv> <button type = "button" id = "btnconnect" onClick = "connect () ؛" id = "btnclose" uparabled = "upabled" onClick = "CloseWebsCOBKE () ؛"> <span aria-hidden = "true"> </span> 断开 </utton> <button type = "button" id = "btnsend" up up up up yourdix = "margin-left: 50px ؛" onClick = "send () ؛"> <span aria-hidden = "true"> </span> 发送消息 </nutton> </viv> <br/> <textArea id = "inmsg" rows = "5" placeholder = "在这里输入需要发送的信息 ..." src = "https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <script type = "text/javaScript"> function zip (str) {var binarystring = pako.gzip (str ، إرجاع BTOA (BinaryString) ؛ } الدالة unsip (b64data) {var strdata = atob (b64data) ؛ var chardata = strdata.split (''). map (function (x) {return x.charcodeat (0) ؛}) ؛ var bindata = new uint8array (chardata) ؛ var data = pako.inflate (bindata) ؛ strdata = string.fromcharcode.apply (null ، new Uint16Array (data)) ؛ إرجاع Strdata ؛ } var websocket = null ؛ var wsbaseurl = null ؛ var wsurl = null ؛ وظيفة init () {wsbaseurl = "ws: //" + window.location.host + "/" ؛ $ ("#basic-ws"). النص (wsbaseurl) ؛ $ (function () {$ ('[data-toggle = "popover"]'). popover () ؛}) ؛ العودة كاذبة } // 关闭 websocket 连接 وظيفة CloseWebSocket () {if (websocket) {websocket.close () ؛ } إرجاع خطأ ؛ } // 将消息显示在网页上 function setMessageInnerHtml (who ، msg) {var message = null ؛ if (who === 1) {message = '<div reb = "Alert"> 本地:' + msg + '</viv>' ؛ } آخر {message = '<div reb = "Alert"> 服务器:' + msg + '</viv>' ؛ } document.getElementById ('message'). innerhtml = (document.getElementById ('message'). innerhtml + message) ؛ $ ("#message"). scrollto ('100 ٪') ؛ العودة كاذبة } // 发送消息 function send () {if (websocket) {var message = $ ("#inmsg"). val () ؛ WebSocket.send (zip (message)) ؛ setMessageInnerhtml (1 ، رسالة) ؛ } إرجاع خطأ ؛ } الدالة connect () {var url = $ ("#basic-ws-addr"). val () ؛ if (url.length <= 0) {$ ('#basic-ws-addr'). popover ('show') ؛ setTimeOut (function () {$ ('#basic-ws-addr'). popover ('Hide') ؛} ، 3000) ؛ } آخر {wsurl = wsbaseurl + url ؛ if ('WebSocket' in window) {websocket = new WebSocket (wsurl) ؛ // 连接发生错误的回调方法 websocket.onerror = function () {setMessageInnerHtml (0 ، "WebSocket 连接发生错误 ->" + wsurl) ؛ $ ("#btnconnect"). lexoveAttr ("معطل") ؛ $ ("#btnclose"). attr ("معطل" ، "معطل") ؛ $ ("#btnsend"). attr ("معطل" ، "معطل") ؛ } ؛ // 连接成功建立的回调方法 websocket.onopen = function () {setMessageInnerHtml (0 ، "WebSocket 连接成功 ->" + wsurl) ؛ $ ("#btnconnect"). attr ("معطل" ، "معطل") ؛ $ ("#btnclose"). lexoveAttr ("معطل") ؛ $ ("#btnsend"). lexoveAttr ("معطل") ؛ } ؛ // 接收到消息的回调方法 websocket.onmessage = function (event) {setMessageInnerHtml (0 ، unsip (event.data)) ؛ } ؛ // 连接关闭的回调方法 websocket.onclose = function () {setMessageInnerHtml (0 ، "WebSocket 连接关闭 ->" + wsurl) ؛ $ ("#btnconnect"). lexoveAttr ("معطل") ؛ $ ("#btnclose"). attr ("معطل" ، "معطل") ؛ $ ("#btnsend"). attr ("معطل" ، "معطل") ؛ } ؛ // 监听窗口关闭事件 ， 当窗口关闭时 ， 主动去关闭 websocket 连接 ， 防止连接还没断开就关闭窗口 ， server 端会抛异常。 window.onbeforeUnload = function () {closeWebsocket () ؛ } ؛ } آخر {Alert ('لا دعم websocket') ؛ }} إرجاع خطأ ؛ } window.onload = init () ؛ </script> </body> </html>到此就可以使用 WebSocket 进行前后端的通信了 ， 如果大家还有不明白的或者有更好的方法 ， 可以在下方的留言区讨论。