自制WebSocket测试工具(前端篇)

笔记有云 2020-10-16

500

导读

小编昨天花了一个小时自制了一个WebSocket测试小工具，和网络上搜索到的在线工具类似，可以实现WebSocket的连接、断开和发送等功能，同时还加上了一些颜色来区别。那么我们先来看看效果吧，这里展示的是实时日志功能。

此篇文章仅展示前端代码(代码部分请左右滑动查看)。

代码部分

看完效果之后话不多说直接上WebSocket核心代码,通常分为连接、接收、发送、异常、关闭连接五个模块。以下是伪代码：

if ("WebSocket" in window)
{
  try{
    websocket = new WebSocket(wsUrl)
  }catch(err){
    ....
  }
}else{
  alert("您的浏览器不支持 WebSocket!");
  return;
}




//连接发生错误的回调方法
websocket.onerror = function () {
  ....
};


//连接成功建立的回调方法
websocket.onopen = function () {
  ....
}


//接收到消息的回调方法
websocket.onmessage = function (event) {
  ....
}


//连接关闭的回调方法
websocket.onclose = function () {
  ....
}


//发送消息
websocket.send = function () {
  ...
}

结合简单的html、css、js即可完成小工具，由于小编非专业前端，还请见谅，具体代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>iFillDream-WebSocket小工具</title>
  <style type="text/css">
    #bq {
      height: 40px;
      line-height: 40px;
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      color: #fff;
      font-family: Arial;
      font-size: 12px;
      letter-spacing: 1px;
    }
</style>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <input id="wsUrl2" type="text" placeholder="欢迎使用iFillDream开发的Websocket小工具" style="width:590px";/>
    <button onclick="setWsUrl()">连接</button>
  <button onclick="closeWebSocket()" title="断开WebSocket连接">断开</button>
  <button onclick="testDemo()" title="测试用例">用例</button>
  <br>
  <input id="text" type="text" style="width:590px"/>
    <button onclick="send()" title="若发送失败请检查您的WebSocket发送功能是否正常">发送</button>
  <br/>


    <hr/>
    <div id="message" style="font-size:13px"></div>
  <br>
  <b style="font-size:12px;cursor:pointer;" onclick="copyText('wsUrl2')" title="点击复制当前WebSocket地址">当前连接地址：</b></span><span id="nowUrl" style="font-size:12px;color: green;cursor:pointer;" onclick="setWsUrl()" title="点击刷新，重连当前WebSocket">暂无</span>
  <br><br>
  <div id="bq"><b><a href="https://mp.weixin.qq.com/s?__biz=MzU5NDMyODA2MQ==&mid=100000095&idx=1&sn=ff09d8155c86d2f4ce5e3d12dee0224f&chksm=7e03a1cd497428dbd3baa1a8bbfe3148d7213c249c15175d2adb658facb0eedfc1aa8706879d#rd">欢迎搜索微信公众号:iFillDream 版权所有:©2020 iFillDream Corporation. All rights reserved.</b></a></div>
</body>


<script type="text/javascript">
    var websocket = null;
    var wsUrl = null;
    var tempUrl = null;


    if ("WebSocket" in window)
    {
      document.getElementById('message').innerHTML = '您的浏览器支持 WebSocket!<br/>';
    }else{
      alert("您的浏览器不支持 WebSocket!");
    }


    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
      console.log(innerHTML);
      document.getElementById('message').innerHTML += innerHTML + '<br/>';
      window.scrollTo(0, document.body.scrollHeight)
    }


    //关闭WebSocket连接
    function closeWebSocket() {
      websocket.close();
    }


    //发送消息
    function send() {
      var message = document.getElementById('text').value;
      if(message == null || message == undefined  || message == ''){
        document.getElementById('message').innerHTML += '发送内容不能为空<br/>';
      }
      websocket.send(message);
    }


    //测试用例
    function testDemo() {
      document.getElementById('wsUrl2').value='ws://echo.websocket.org';
      setWsUrl();
    }


    //设置WebSocket链接地址
    function setWsUrl() {
      document.getElementById('message').innerHTML = '清空屏幕成功<br/>';
      if( websocket != null ){
        temp = wsUrl;
        websocket.close();
        document.getElementById('message').innerHTML += '已关闭之前的WebSocket:' + temp +'<br/>';
      }


      wsUrl = document.getElementById('wsUrl2').value;


      document.getElementById('nowUrl').innerText=wsUrl


      if ("WebSocket" in window)
      {
        try{
          websocket = new WebSocket(wsUrl)
        }catch(err){
          document.getElementById('message').innerHTML = "<span style='color: red;'>WebSocket连接发生错误:" + err + "</span><br/>";
        }
      }else{
        alert("您的浏览器不支持 WebSocket!");
        return;
      }
      //连接发生错误的回调方法
      websocket.onerror = function () {
        document.getElementById('message').innerHTML = 'WebSocket连接发生错误' + wsUrl + '<br/>';
        setMessageInnerHTML("<span style='color: red;'>WebSocket连接发生错误"+ wsUrl + '</span><br/>');
      };


      //连接成功建立的回调方法
      websocket.onopen = function () {
        setMessageInnerHTML("<span style='color: green;'>WebSocket连接成功:" + wsUrl + '</span><br/>');
      }


      //接收到消息的回调方法
      websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
      }


      //连接关闭的回调方法
      websocket.onclose = function () {
        setMessageInnerHTML("<span style='color: red;'>WebSocket连接关闭</span>");
      }


    }




    //此方法只针对input框
    function copyText(id)
{
      var o=document.getElementById(id);
      o.select(); // 选择对象
      document.execCommand("Copy");//复制
      document.getElementById('message').innerHTML += '已复制:' + wsUrl + '<br/>';
    }


    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
      closeWebSocket();
    }
</script>
</html>

好了，到此就全部结束了,您学废了嘛。这里仅仅展示了实时日志的功能，WebSocket其实还有更多的玩法等你来探索。为此小编提供了线上版本，详细地址请点击阅读原文查看。

【更多精彩】

Java微信解密算法

脚本搭建Nginx、Redis、MySql、Maven

前端

文章转载自笔记有云，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

自制WebSocket测试工具(前端篇)

评论