<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                ## 一、概述 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、前端注意,心跳反饋信息是沒有業務意涵的,需考慮顯示的時候過濾;
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看