websocket集成 · FA+Ecloud互聯網應用開發平臺綜合技術入門指南(READ)

## 一、概述 WebSocket是一種在單個TCP連接上進行全雙工通信的協議。WebSocket通信協議于2011年被IETF定為標準RFC 6455，并由RFC7936補充規范。WebSocket API也被W3C定為標準。WebSocket使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸；可用于在線客服、在線推送、在線聊天； Tomcat、Netty等服務器及所有主流瀏覽器都已經支持websocket協議，但由于 Tomcat 的吞吐量、連接數都很低，作為測試是可以的。在生產環境，一定需要使用高吞吐量、高連接數的 Netty 服務器進行替代； ### **與HTTP的區別** ![](https://img.kancloud.cn/64/c7/64c773f44b839317998b3e0188691ef9_628x511.png) ## 二、引入步驟 ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` ## 三、后端開發 ### **參數配置** ``` rayframework.enabled.websocket=true ``` ### **后端開發** 服務器端開發，實質上，就是發布一個個（當然也可以僅僅發布一個）的服務地址，供前端建立連接，進行通訊；平臺已經做好了通訊的基礎設施處理，業務開發中，只需要調用平臺提供的api，對指定在線用戶進行信息發送即可；后端提供了兩類服務場景，供業務來調用，一種是作為當前用戶作為服務端，發送信息給客戶端： ``` #發送信息給指定在線賬戶 /api/system/utility/rayim/sender/spec #發送信息給所有在線賬戶 /api/system/utility/rayim/sender/all ``` 另外一種是設定服務端賬戶，平臺支持將所有的客戶信息轉發給多個服務端，通過本接口來設定接受信息的服務端賬戶； ``` #自動將自己注冊作為服務端 /api/system/utility/rayim/waiter/register/auto #將指定賬戶從服務端刪除 /api/system/utility/rayim/waiter/register/remove #顯示當前所有服務端 ``` 內部調用： ``` @Autowired private RayWebsocketSender rayWebsocketSender; ``` ## 四、前端開發 ### **服務地址** 服務調用地址： ``` ws://ip:port/rayim?rayAccessToken=${rayAccessToken} ``` >[danger] > 1、 ip為當前應用部署的地址，port為當前應用部署的端口； > 2、${rayAccessToken}是當前賬號的的rayAccessToken，登錄后就能從主程序中獲取得到，這里就包含了用來識別當前用戶的staffId信息； > 3、如果你的賬戶被注冊為服務端了，則所有的客戶端信息，你都能接受得到； ### **代碼參考** 客戶端直接用js，參考代碼： ``` <html> <body> <input type="text" id="msg" size="100" value="123"> <button onclick="send()">發送消息</button> <script type="text/javascript"> var ws = new WebSocket('ws://www.rayframework.com/raysale/rayim?rayAccessToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIxIiwic3ViIjoidW5pZnJhbWV3b3JrIiwic3RhZmZDb2RlIjoic3VwZXJtYW5hZ2VyIiwiY29ycG9yYXRpb25JZCI6MCwiaWRlbnRpdHlJZCI6MywiZGVwYXJ0bWVudElkIjoxLCJmcm9tSG9zdCI6IjExMy4xMTguMTg0LjEyNSIsImV4cCI6MTYzMjMxMjg0NCwiaWF0IjoxNjMyMzA5MjQ0LCJzdGFmZklkIjoxLCJkb21haW5JZCI6MX0.xKEYCCJRZApNcGOqktihU-ysQMGjrwu1Cqm8q0LvjD4'); ws.onopen = function() { console.log("open"); }; ws.onclose = function() { console.log("websocket已關閉"); }; ws.onerror = function() { console.log("websocket發生了錯誤"); } ws.onmessage = function(msg) { document.getElementById("msg").value=msg.data; }; function send() { var txt= document.getElementById("msg").value; ws.send(txt); } </script> </body> </html> ``` 進階版本，支持圖片： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>websocket測試</title> </head> <body> <input type="text" id="text"><button onclick="sendText()">發送</button> <input type="file" id="f" onchange="chooseFile()"> <div id="main"> </div> <script type="text/javascript"> var ws = new WebSocket('ws://www.rayframework.com/raysale/rayim?rayAccessToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIxIiwic3ViIjoidW5pZnJhbWV3b3JrIiwic3RhZmZDb2RlIjoic3VwZXJtYW5hZ2VyIiwiY29ycG9yYXRpb25JZCI6MCwiaWRlbnRpdHlJZCI6MywiZGVwYXJ0bWVudElkIjoxLCJmcm9tSG9zdCI6IjExMy4xMTguMTg0LjEyNSIsImV4cCI6MTYzMjMxMjg0NCwiaWF0IjoxNjMyMzA5MjQ0LCJzdGFmZklkIjoxLCJkb21haW5JZCI6MX0.xKEYCCJRZApNcGOqktihU-ysQMGjrwu1Cqm8q0LvjD4'); ws.onopen = function (ev) { console.log("------連接服務器成功-----") } ws.onerror=function (ev) { console.log("------連接服務器出錯-----") } //接收消息 ws.onmessage=function (ev) { //解析json var json = JSON.parse(ev.data); //1為文本消息 if(json.code==1){ document.querySelector("#main").innerHTML="<p>"+json.msg+"</p>"+document.querySelector("#main").innerHTML; //2為圖片消息 }else if(json.code==2){ document.querySelector("#main").innerHTML='<img width="150px" src='+json.msg+'>'+document.querySelector("#main").innerHTML; } } //發送文本消息 function sendText() { var msg = document.querySelector("#text").value if(msg){ ws.send(JSON.stringify({code:1,msg:msg})); document.querySelector("#text").value="" } } //發送圖片消息 function chooseFile() { var files = document.querySelector("#f").files if(files.length>0){ var fileReader = new FileReader(); fileReader.readAsDataURL(files[0]) fileReader.onload=function (e) { var s = JSON.stringify({code:2,msg:e.target.result}); ws.send(s) } } } </script> </body> </html> ``` ### **心跳** 后端提供了心跳保持機制，前端需定時發送`rayHeartBeat`心跳，后端發回`rayImHeartBeatFeedback`反饋； > 1、可與發送信息合并處理，發送完信息，開始計時，指定時間后，若還未發送信息，則發送心跳，然后重新計時，只要發送信息或發送心跳，都會重置計時器； > 2、超時斷連接時間，這個跟服務器有關，所以，治本的方法是用心跳保持來做； > 3、前端注意，心跳反饋信息是沒有業務意涵的，需考慮顯示的時候過濾；