55行代码轻松解决websocket

分手后的思念是犯贱 2021-10-01 08:28 292阅读 0赞

迫于需求，需要在jsp里面添加websocket **0202年了呀，哥哥姐姐，这个框架岁数比我的年纪都要大，做惯前后端分离去做jsp是真的恶心，还好只是负责这一轮的更新迭代**  
*呐呐，如果是阁下的话，一定能够好好守护好二次元世界吧，果然吗，即时是我这样的怪胎。咯呐撒嘛也不不会放弃吗，啊你嘎多！*

![18749935-a7320239166b6a30.jpg][]

先上效果图

![18749935-5016277e4b3ffb9f.gif][]

效果图

心跳重连

![18749935-01551095b18c673a.gif][]

心跳重连

功能实现

<!DOCTYPE html>
    <html>
      <head>
        <title></title>
      </head>
      <body>
        <br>
        <input type="text" id="sendtext"><button id="btn">发送</button>
        <script>
        var time
        const ws = {
          init: () => {
              return new WebSocket("ws://localhost:8080/ws")
          },
          open: socket => {
            return new Promise((resolve, reject) => {
              socket.onopen = () => {
                resolve(200)
              }
            })
          },
          send: (socket, value) => {
            socket.send(value)
          },
          // 掉线可以和关闭共用代码
          error: socket => {
            socket.onerror = () => {
            }
          },
          // 关闭
          close: socket => {
            socket.onclose = () => {
              clearInterval(time)
              time = setInterval(() => {
                goSocket()
              }, 2000)
            }
          }
        }
        async function goSocket () {
          // 初始化
          const socket = ws.init()
          // 链接
          await ws.open(socket)
          // 接收
          socket.onmessage = (msg) => {
            console.log(msg.data)
          }
          // 发送
          document.getElementById('btn').onclick = () => {
            const value = document.getElementById('sendtext').value
            ws.send(socket, value)
          }
          // 监听掉线
          ws.error(socket)
          // 监听掉线
          ws.close(socket)
          // 所谓的心跳包
          clearInterval(time)
          time = setInterval(() => {
            ws.send(socket, 'ing')
          }, 3000)
        }
        goSocket()
        </script>
      </body>
    </html>

[18749935-a7320239166b6a30.jpg]: /images/20210825/22f94db6f3e34740a7c94dfdb0f7306b.png
[18749935-5016277e4b3ffb9f.gif]: /images/20210825/d0f8641465f745caafb0a9717a63a992.png
[18749935-01551095b18c673a.gif]: /images/20210825/9ef8c58f50a244f493fce17be27d6f33.png