JavaScript實現線上websocket WSS測試工具 -toolfk程式設計師工具網

王三金發表於2018-11-17
JavaScriptWeb程式設計師

      本文要推薦的[ToolFk]是一款程式設計師經常使用的線上免費測試工具箱，ToolFk 特色是專注於程式設計師日常的開發工具，不用安裝任何軟體，只要把內容貼上按一個執行按鈕,就能獲取到想要的內容結果。ToolFk還支援 BarCode條形碼線上生成、 QueryList採集器、 PHP程式碼線上執行、 PHP混淆、加密、解密、 Python程式碼線上執行、JavaScript線上執行、YAML格式化工具、HTTP模擬查詢工具、HTML線上工具箱、JavaScript線上工具箱、CSS線上工具箱、JSON線上工具箱、Unixtime時間戳轉換、Base64/URL/Native2Ascii轉換、CSV轉換工具箱、XML線上工具箱、WebSocket線上工具、Markdown 線上工具箱、Htaccess2nginx 轉換、進位制線上轉換、線上加密工具箱、線上偽原創工具、線上APK反編譯、線上網頁截圖工具、線上隨機密碼生成、線上生成二維碼Qrcode、線上Crontab表示式生成、線上短網址生成、線上計算器工具。等20多個日常程式設計師開發工具，算是一個非常全面的程式設計師工具箱網站。


網站名稱：ToolFk
網站鏈結：www.toolfk.com/
工具連結：www.toolfk.com/tool-online…

程式碼教學

本工具[線上WebScoket測試工具]使用JavaScript程式碼實現。網站頁面如下

STEP 1

websocket.png

STEP 2

核心程式碼如下

function StartWebSocket(wsUri) {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { onMessage(evt) };
    websocket.onerror = function(evt) { onError(evt) }; }

function onOpen(evt) {
    writeToScreen("<span style='color:red'>@lang('toolfk.lang_text_connect_suc')</span>");
}
function onClose(evt) {
    writeToScreen("<span style='color:red'>@lang('toolfk.lang_text_connect_close')</span>");
    websocket.close();
}
function onMessage(evt) {
    writeToScreen('<span style="color:blue">@lang('toolfk.lang_text_server_rep')&nbsp;'+formatDate(new Date())+'</span><br/><span class="bubble">'+ evt.data+'</span>');
}
function onError(evt) {
    writeToScreen('<span style="color: red;">@lang('toolfk.lang_text_send_error'):</span> '+ evt.data);
}
function   formatDate(now)   {
    var   year=now.getFullYear();
    var   month=now.getMonth()+1;
    var   date=now.getDate();
    var   hour=now.getHours();
    var   minute=now.getMinutes();
    var   second=now.getSeconds();
    return   year+"-"+(month=month<10?("0"+month):month)+"-"+(date=date<10?("0"+date):date)+" "+(hour=hour<10?("0"+hour):hour)+":"+(minute=minute<10?("0"+minute):minute)+":"+(second=second<10?("0"+second):second);
}
function writeToScreen(message) {
    var div = "<div class='newmessage'>"+message+"</div>";
    var d = $("#output");
    var d=d[0];
    var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
    $("#output").append(div);
    if (doScroll) {
        d.scrollTop = d.scrollHeight - d.clientHeight;
    }
}

$(function(){
    $(".btn-open").click(function(){
        var wsaddr = $("#wsaddr").val();
        if (wsaddr=='') {
            layer.msg("@lang('toolfk.lang_text_websocket_empty')");
            return false;
        }
        StartWebSocket(wsaddr);
    });

    $(".btn-close").click(function(){
        websocket.close();
    });

    $(".btn-clear").click(function(){
        $("#wsaddr").val("");
        $("#output").empty();
    });
    $(".btn-demo").click(function(){
        $("#wsaddr").val($(this).data("url"));
    });

    $(".btn-send").click(function(){
        var message=$("#message").val();
        if (message=='') {
            layer.msg("@lang('toolfk.lang_text_send_address')");
            $("#message").focus();
            return false;
        }
        if (typeof websocket==="undefined"){
            layer.msg("@lang('toolfk.lang_text_send_fail')");
            return false;
        }
        if (websocket.readyState==3) {
            layer.msg("@lang('toolfk.lang_text_close_suc')");
            return false;
        }
        $("#message").val('');
        writeToScreen('<span style="color:green">@lang('toolfk.lang_text_send_info_ok')&nbsp;'+formatDate(new Date())+'</span><br/>'+ message);
        websocket.send(message);
    })
});
複製程式碼


值得一試的三個理由：

  1. 整合各種程式設計師開發中經常使用的開發測試工具。

  2. 簡潔美觀大氣的網站頁面

  3. 支援 線上格式化執行程式碼、APK線上反編譯、線上高強度密碼生成、線上網頁截圖 等二十多種工具服務

  4. 同時還推薦一下它的姐妹網 www.videofk.com 視訊下載工具箱


本文連結：www.hihubs.com/article/373


相關文章