美文网首页
websocket本地调试html

websocket本地调试html

作者: 小马将过河 | 来源:发表于2020-09-13 14:14 被阅读0次

    先看看本地这个静态html在浏览器里看到的页面。

    image.png
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>本地websocket测试</title>
            <meta name="robots" content="all" />
            <meta name="keywords" content="本地,websocket,测试工具" />
            <meta name="description" content="本地,websocket,测试工具" />
            <style>
                .btn-group{
                    display: inline-block;
                }
            </style>
        </head>
        <body>
            <input type='text' value='ws://localhost:3000/api/ws' class="form-control" style='width:390px;display:inline'
             id='wsaddr' />
            <div class="btn-group" >
                <button type="button" class="btn btn-default" onclick='addsocket();'>连接</button>
                <button type="button" class="btn btn-default" onclick='closesocket();'>断开</button>
                <button type="button" class="btn btn-default" onclick='$("#wsaddr").val("")'>清空</button>
            </div>
            <div class="row">
                <div id="output" style="border:1px solid #ccc;height:365px;overflow: auto;margin: 20px 0;"></div>
                <input type="text" id='message' class="form-control" style='width:810px' placeholder="待发信息" onkeydown="en(event);">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" onclick="doSend();">发送</button>
                </span>
                </div>
            </div>
        </body>     
            
            <script crossorigin="anonymous" integrity="sha384-LVoNJ6yst/aLxKvxwp6s2GAabqPczfWh6xzm38S/YtjUyZ+3aTKOnD/OJVGYLZDl" src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
            <script language="javascript" type="text/javascript">
                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);
                }
                var output;
                var websocket;
     
                function init() {
                    output = document.getElementById("output");
                    testWebSocket();
                }
     
                function addsocket() {
                    var wsaddr = $("#wsaddr").val();
                    if (wsaddr == '') {
                        alert("请填写websocket的地址");
                        return false;
                    }
                    StartWebSocket(wsaddr);
                }
     
                function closesocket() {
                    websocket.close();
                }
     
                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'>连接成功,现在你可以发送信息啦!!!</span>");
                }
     
                function onClose(evt) {
                    writeToScreen("<span style='color:red'>websocket连接已断开!!!</span>");
                    websocket.close();
                }
     
                function onMessage(evt) {
                    writeToScreen('<span style="color:blue">服务端回应&nbsp;' + formatDate(new Date()) + '</span><br/><span class="bubble">' +
                        evt.data + '</span>');
                }
     
                function onError(evt) {
                    writeToScreen('<span style="color: red;">发生错误:</span> ' + evt.data);
                }
     
                function doSend() {
                    var message = $("#message").val();
                    if (message == '') {
                        alert("请先填写发送信息");
                        $("#message").focus();
                        return false;
                    }
                    if (typeof websocket === "undefined") {
                        alert("websocket还没有连接,或者连接失败,请检测");
                        return false;
                    }
                    if (websocket.readyState == 3) {
                        alert("websocket已经关闭,请重新连接");
                        return false;
                    }
                    console.log(websocket);
                    $("#message").val('');
                    writeToScreen('<span style="color:green">你发送的信息&nbsp;' + formatDate(new Date()) + '</span><br/>' + message);
                    websocket.send(message);
                }
     
                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 en(event) {
                    var evt = evt ? evt : (window.event ? window.event : null);
                    if (evt.keyCode == 13) {
                        doSend()
                    }
                }
            </script>
     
    </html>
    

    相关文章

      网友评论

          本文标题:websocket本地调试html

          本文链接:https://www.haomeiwen.com/subject/ptpnektx.html