devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

webSocket_js websocket readystate

作者：知新_RL | 2024-08-11 12:47:25

赞

踩

js websocket readystate

介绍:

readyState表示连接有四种状态：

  1. connecting (0)：表示还没建立连接；

  2. open    (1)： 已经建立连接，可以进行通讯；

  3. closing (2)：通过关闭握手，正在关闭连接；

  4. closed  (3)：连接已经关闭或无法打开； 

前端代码表示

原生JS(HTML+JS)

HTML文件

  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>通信</title>
  7. </head>
  8.  
  9. <body>
  10. <ul id="list"></ul>
  11. <input  type="text" id="message" placeholder="请输入内容"  />
  12. <button id="send">发送</button>
  13.  
  14.  
  15.   <script src="XXX.js> </script>
  16.    
  17.    
  18. </body>
  19. </html>

JS文件

  1.  
  2. //立即执行函数,避免全局变量之间的污染
  3. ;((doc)=>{
  4.  
  5. const oList=doc.querySelector('#list');
  6. const oMsg=doc.querySelector('#message');
  7. const oSendBtn.querySelector('#send');
  8. const ws=new Socket('ws:localhost:8000');//创建一个Socket实例
  9.  
  10. //初始化函数
  11. const init=()=>{
  12. bindEvent();
  13. }
  14.  
  15. //绑定事件函数,监听oSendBtn,
  16. //最后参数是指定事件是否在捕获或冒泡阶段执行,false是默认冒泡阶段执行,true捕获阶段执行
  17. function bindEvent(){
  18.   oSendBtn.addEventListener('click',handSendBtnClick,false);  
  19.   ws.addEventListener('open',handOpen,false);
  20.   ws.addEventListener('close',handClose,false);
  21.   ws.addEventListener('error',handError,false);
  22.   ws.addEventListener('message',handMessage,false);
  23. }
  24.  
  25. //具体的点击事件
  26. function handSendBtnClick(){
  27. console.log('发送的具体消息')
  28.   const msg=oMsg.value
  29.    if(!msg.trim().length){
  30.      return
  31.    }
  32. //发送的应该为字符串
  33.   ws.send(JSON.stringfy({ 
  34.      dataTime:new Data().getTime(),
  35.      message:msg 
  36. }))  
  37.  
  38. oMsg.value=''
  39. }
  40.  
  41. //socket的四个事件
  42. function handOpen(){
  43. console.log('打开')
  44. }
  45.  
  46. function handClose(){
  47. console.log('关闭')
  48. }
  49.  
  50. function handError(){
  51. console.log('')
  52. }
  53.  
  54. function handMessage(e){
  55. console.log('接收消息',e.data)
  56. const msgData=JSON.parse(e.data) //转化为对象
  57. oList.appendChild(createMsg(msgData)) //转为li
  58. }
  59. //做成LI的格式
  60. function createMsg(data){
  61. const {user,dataTime,message}=data
  62. const oItem=doc.createElement('li')
  63. oItem.innerHTML=`
  64. <p>
  65. <span>${user}</span>
  66. <li>${new Data()}</li>
  67. </p>
  68. <p>消息:${message}</p>
  69. `
  70. return oItem
  71. }
  72.  
  73.  
  74. init()
  75.  
  76.  
  77. })(document);

​​​​​​​纯HTML

  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>聊天室</title>
  7.  
  8.     <script type="text/javascript">
  9.  
  10.         var ws = null;
  11.         var interval = null;
  12.         var uri = "ws://192.168.110.92:8080/schedule/websocket/connect";
  13.         var myVar = null;
  14.         var reconnectState = null;
  15.  
  16.         function WebSocketTest() {
  17.             if ("WebSocket" in window) {
  18.                 createWebSocket();
  19.             } else {
  20.                 // 浏览器不支持 WebSocket
  21.                 alert("您的浏览器不支持 WebSocket!");
  22.             }
  23.         }
  24.  
  25.         /**
  26.        * 创建websocket
  27.        */
  28.         function createWebSocket() {
  29.             alert("开启长连接")
  30.             // 打开一个 web socket
  31.             ws = new WebSocket(uri);
  32.             ws.onopen = function () {
  33.                 document.getElementById("reconnectShow").innerText = "无";
  34.                 document.getElementById("online").innerText = "在线";
  35.                 reconnectState = false;
  36.                 clearInterval(myVar);
  37.                 // 心跳检测
  38.                 interval = setInterval(function () {
  39.                     // 使用 send() 方法发送数据		
  40.                     sendMsg("ping");
  41.                 }, 5000);
  42.  
  43.             };
  44.  
  45.             ws.onmessage = function (evt) {
  46.                 var received_msg = evt.data;
  47.                 console.log("回复",evt.data);
  48.                 if (received_msg == "pong") {
  49.                     console.log(received_msg);
  50.                 } else {
  51.                     document.getElementById("num").innerText = received_msg;
  52.                 }
  53.             };
  54.  
  55.             ws.onclose = function () {
  56.                 webscoketClose();
  57.             };
  58.         }
  59.  
  60.  
  61.         /**
  62.        * websocket重连
  63.        */
  64.         function reconnect() {
  65.             // 检测到websocket连接断开
  66.             // 0 (WebSocket.CONNECTING)正在链接中
  67.             // 1 (WebSocket.OPEN)已经链接并且可以通讯
  68.             // 2 (WebSocket.CLOSING) 连接正在关闭
  69.             // 3 (WebSocket.CLOSED)连接已关闭或者没有链接成功
  70.             if (reconnectState == false) {
  71.                 reconnectState = true;
  72.                 var reconnectNum = 1;
  73.                 console.log(ws.readyState);
  74.                 myVar = setInterval(function () {
  75.                     if (ws.readyState == 2 || ws.readyState == 3) {
  76.                         if (reconnectNum == 6) {
  77.                             clearInterval(myVar);
  78.                             document.getElementById("reconnectShow").innerText = "停止重连";
  79.                             return;
  80.                         }
  81.                         document.getElementById("reconnectShow").innerText = "第" + reconnectNum + "次尝试重连中";
  82.                         createWebSocket();
  83.                         reconnectNum++;
  84.                     }
  85.  
  86.                 }, 5 * 1000)
  87.             }
  88.         }
  89.  
  90.         function noReconnectclose() {
  91.             reconnectState = true;
  92.             webscoketClose();
  93.         }
  94.  
  95.         /**
  96.          * websocket关闭 
  97.          */
  98.         function webscoketClose() {
  99.             ws.close();
  100.             clearInterval(interval)
  101.             console.log("websocket关闭");
  102.             document.getElementById("online").innerText = "离线";
  103.             // 开启断线重连
  104.             reconnect();
  105.         }
  106.  
  107.         function sendMsg(str) {
  108.             if (ws.readyState == 1) {
  109.                 ws.send(str);
  110.                 // alert("发送内容");
  111.             } else {
  112.                 alert("未连接上服务器");
  113.             }
  114.         }
  115.  
  116.         function add() {
  117.             sendMsg("+1");
  118.         }
  119.  
  120.         function remove() {
  121.             sendMsg("-1");
  122.         }
  123.  
  124.     </script>
  125.  
  126. </head>
  127.  
  128. <body>
  129.     <div id="sse">
  130.         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
  131.         <a href="javascript:noReconnectclose()">停止 WebSocket</a>
  132.     </div>
  133.     <br>
  134.     当前webscoket状态:<span id="online">离线</span>
  135.     <br>
  136.     当前重连状态：<span id="reconnectShow">无</span>
  137.     <br>
  138.     当前怒气值：<span id="num">0</span>
  139.     <br>
  140.     <a href="javascript:add()">+1</a>
  141.     <a href="javascript:remove()">-1</a>
  142. </body>
  143.  
  144. </html>
  145.

vue简单的逻辑 

客户端页面:

  1.  <div id="app" >
  2.         <ul>
  3.             <li v-for="item in msgList" :key="item.id">
  4.                 <p>
  5.                     <span>{{item.username}}:</span>
  6.                     <span>{{new Date(item.dataTime)}}</span>
  7.                 </p>
  8.                 <p>消息:{{item.msg}}</p>
  9.             </li>
  10.         </ul>
  11.         <input type="text" placeholder="请输入消息" v-model="msg" />
  12.         <button @click="sendMsg">发送</button>
  13.     </div>
  1. <script>
  2.     const ws = new WebSocket('ws://localhost:8000')
  3.  
  4.  
  5.     new Vue({
  6.         el: '#app',
  7.         data: {
  8.             msg: '',
  9.             username: '',
  10.             msgList: []
  11.  
  12.         },
  13.         mounted() {
  14.             ws.addEventListener('open', this.handleWsOpen.bind(this), false) // 监听连接打开 前面的this指向绑定的ws,bind里面的this为了改变指向,指向当前vue实例
  15.             ws.addEventListener('close', this.handleWsClose.bind(this), false) // 监听连接关闭
  16.             ws.addEventListener('error', this.handleWsError.bind(this), false) // 监听连接错误
  17.             ws.addEventListener('message', this.handleWsMessage.bind(this), false) // 监听消息
  18.  
  19.         },
  20.         methods: {
  21.             sendMsg() {
  22.                 //把绑定的消息取出来
  23.                 const msg=this.msg
  24.                 //如果去掉两边空格,长度还为0,则返回不再进行下一步
  25.              if(!msg.trim().length){
  26.                 return
  27.              }
  28.  
  29.                 //把当前时间戳
  30.                 const dataTime=new Date().getTime()
  31.                 //把用户名
  32.                 const username=this.username
  33.                 //把消息发送到服务器
  34.                 ws.send(JSON.stringify({
  35.                     msg,
  36.                     dataTime,
  37.                     username
  38.                 }))
  39.                 //不可以传对象 要转化为JSON字符串
  40.                 // ws.send({   
  41.                 //    id:new Data().getTime(),
  42.                 //    user:this.username,
  43.                 //    dataTime:new Data().getTime(),
  44.                 //    msg:this.msg 
  45.                 // })
  46.                 this.msg=''   //注意发送完要清空输入框
  47.             },
  48.             handleWsOpen(e) {
  49.                 console.log('连接成功')
  50.             },
  51.             handleWsClose(e) {
  52.                 console.log('连接关闭')
  53.             },
  54.             handleWsError(e) {
  55.                 console.log('连接错误')
  56.             },
  57.             handleWsMessage(event) {
  58.                 const data = JSON.parse(event.data)   //内容包裹在data中 且需要转换为对象
  59.                 this.msgList.push(data)
  60.                 console.log(data)
  61.             }
  62.         }
  63.     })
  64. </script>

 服务器部分:

增加长连接的方式 :

  1. <template>
  2.          <ul>
  3.             <li v-for="item in msgList" :key="item.id">
  4.                 <p>
  5.                     <span>{{item.username}}:</span>
  6.                     <span>{{new Date(item.dataTime)}}</span>
  7.                 </p>
  8.                 <p>消息:{{item.msg}}</p>
  9.             </li>
  10.         </ul>
  11.         <input type="text" placeholder="请输入消息" v-model="msg" />
  12.         <button @click="sendDataToServer">发送</button>
  13. </template>
  14.  
  15. <script>
  16.     export default {
  17.         name: "WebSocket",
  18.         data() {
  19.             return {                
  20.                 wsIsRun: false,     // ws是否启动              
  21.                 webSocket: null,    // 定义ws对象                
  22.                 ws: '',             // ws请求链接（类似于ws后台地址）
  23.                 wsTimer: null,      // ws定时器
  24.                 msg: '',
  25.                 username: '',
  26.                 msgList: [],       //包含传过去的id,username,dataTime
  27.             }
  28.         },
  29.         async mounted() {
  30.             this.wsIsRun = true
  31.             this.wsInit()
  32.         },
  33.         methods: {
  34.             sendDataToServer() {
  35.                 if (this.webSocket.readyState === 1) {
  36.                    // this.webSocket.send('来自前端的数据')
  37.                  //把绑定的消息取出来
  38.                 const msg = this.msg
  39.                 //如果去掉两边空格,长度还为0,则返回不再进行下一步
  40.                 if (!msg.trim().length) {
  41.                     return
  42.                 }
  43.                 //当前时间戳
  44.                 const dataTime = new Date().getTime()
  45.                 //用户名
  46.                 const username = this.username
  47.                 //把消息发送到服务器
  48.                 this.webSocket.send(JSON.stringify({
  49.                     msg,
  50.                     dataTime,
  51.                     username
  52.                 }))
  53.                  this.msg = ''   //注意发送完要清空输入框
  54.                 } else {
  55.                     throw Error('服务未连接')
  56.                 }
  57.             },
  58.             /**
  59.              * 初始化ws
  60.              */
  61.             wsInit() {
  62.                 const wsuri = 'ws://10.229.36.158:7777/websocket/badao'
  63.                 this.ws = wsuri
  64.                 if (!this.wsIsRun) return
  65.                 // 销毁ws
  66.                 this.wsDestroy()
  67.                 // 初始化ws
  68.                 this.webSocket = new WebSocket(this.ws)
  69.                 // ws连接建立时触发
  70.                 this.webSocket.addEventListener('open', this.wsOpenHanler)
  71.                 // ws服务端给客户端推送消息
  72.                 this.webSocket.addEventListener('message', this.wsMessageHanler)
  73.                 // ws通信发生错误时触发
  74.                 this.webSocket.addEventListener('error', this.wsErrorHanler)
  75.                 // ws关闭时触发
  76.                 this.webSocket.addEventListener('close', this.wsCloseHanler)
  77.  
  78.                 // 检查ws连接状态,readyState值为0表示尚未连接，
  79.                //  1表示建立连接，2正在关闭连接，3已经关闭或无法打开
  80.                 clearInterval(this.wsTimer)
  81.                 this.wsTimer = setInterval(() => {
  82.                     if (this.webSocket.readyState === 1) {
  83.                         clearInterval(this.wsTimer)
  84.                     } else {
  85.                         console.log('ws建立连接失败')
  86.                         this.wsInit()
  87.                     }
  88.                 }, 3000)
  89.             },
  90.             wsOpenHanler(event) {
  91.                 console.log('ws建立连接成功')
  92.             },
  93.             wsMessageHanler(e) {
  94.                 console.log(e)
  95.                 const data = JSON.parse(e.data)   //内容包裹在data中 且需要转换为对象
  96.                 this.msgList.push(data)
  97.             },
  98.             /**
  99.              * ws通信发生错误
  100.              */
  101.             wsErrorHanler(event) {
  102.                 console.log(event, '通信发生错误')
  103.                 this.wsInit()
  104.             },
  105.             /**
  106.              * ws关闭
  107.              */
  108.             wsCloseHanler(event) {
  109.                 console.log(event, 'ws关闭')
  110.                 this.wsInit()
  111.             },
  112.             /**
  113.              * 销毁ws
  114.              */
  115.             wsDestroy() {
  116.                 if (this.webSocket !== null) {
  117.                     this.webSocket.removeEventListener('open', this.wsOpenHanler)
  118.                     this.webSocket.removeEventListener('message', this.wsMessageHanler)
  119.                     this.webSocket.removeEventListener('error', this.wsErrorHanler)
  120.                     this.webSocket.removeEventListener('close', this.wsCloseHanler)
  121.                     this.webSocket.close()
  122.                     this.webSocket = null
  123.                     clearInterval(this.wsTimer)
  124.                 }
  125.             },
  126.         }
  127.     }
  128. </script>
  129.  
  130. <style scoped>
  131.  
  132. </style>

页面布局:

:style="i.userId == userId? 'float: right' : '' "   

:class="i.userId == userId? 'right':'left'"  

可用于区分聊天内容在左侧还是右侧

  1. .left {
  2.           background: white;
  3.           animation: toLeft 0.5s ease both 1;
  4.         }
  5.         .right {
  6.           background: #53a8ff;
  7.           color: white;
  8.           animation: toright 0.5s ease both 1;
  9.         }
  10.         @keyframes toLeft {
  11.           0% {
  12.             opacity: 0;
  13.             transform: translateX(-10px);
  14.           }
  15.           100% {
  16.             opacity: 1;
  17.             transform: translateX(0px);
  18.           }
  19.         }
  20.         @keyframes toright {
  21.           0% {
  22.             opacity: 0;
  23.             transform: translateX(10px);
  24.           }
  25.           100% {
  26.             opacity: 1;
  27.             transform: translateX(0px);
  28.           }
  29.         }
  30.       }
  31.     }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/964304?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号