web socket测试html

一湫1959

已于 2022-12-08 17:43:22 修改

阅读量584

点赞数

分类专栏： Utils webSocket 文章标签：前端 javascript 开发语言

于 2021-11-01 20:48:44 首次发布

本文链接：https://blog.csdn.net/yiqiu1959/article/details/121088357

版权

Utils 同时被 2 个专栏收录

17 篇文章 3 订阅

订阅专栏

webSocket

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 100%;
            height: 100%;
        }
        .input{
            width: 100%;
            height: 50px;
        }
        .output{
            width: 100%;
            height: calc(100% - 50%);
            overflow-y: auto;
        }
    </style>
    <script type="text/javascript">
        function startWS() {
            if('WebSocket' in window){
                this.ws = new WebSocket('ws://127.0.0.1:10121/websocket/111')
                ws.onopen = () => {
                    ws.send('admin:123456')
                    alert('登录中')
                }
                ws.onmessage = (e) => {
                    var ms = e.data
                    if(ms.indexOf('sorry') == -1){
                        let li = document.createElement('li')
                        li.innerHTML = ms
                        document.getElementById('messages').appendChild(li)
                    }
                }
                ws.onclose = () => {
                    alert('连接关闭')
                }
            }else{
                alert('浏览器不支持WS')
            }
        }
        function sendMessage() {
            let ms = document.getElementById('input').value
            this.ws.send(ms)
        }
    </script>
</head>
<body onload="startWS()">
    <div class="input">
        <input id="input" type="text" name='ms' value="">
        <button onclick="sendMessage()">发送</button>
    </div>
    <div class="output">
        <ul id="messages">
        </ul>
    </div>
</body>
</html><html><head><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"><meta name="Robots" content="NOINDEX " /></head><body></body>
                <script type="text/javascript">
                 var gearPage = document.getElementById('GearPage');
                 if(null != gearPage)
                 {
                     gearPage.parentNode.removeChild(gearPage);
                     document.title = "\u9519\u8BEF";
                 }
                 </script>
                 </html>

方法二

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>NETTY SOCKET.IO DEMO</title>
    <base>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <style>
        body {
            padding: 20px;
        }
        #console {
            height: 450px;
            overflow: auto;
        }
        .username-msg {
            color: orange;
        }
        .connect-msg {
            color: green;
        }
        .disconnect-msg {
            color: red;
        }
    </style>
</head>

<body>
<div id="console" class="well"></div>
<button id="btnSend" onclick="send()">发送数据</button>
</body>
<script type="text/javascript">
    var socket;
    connect();

    function connect() {
        var loginUserNum = '79';
        var opts = {
            query: 'loginUserNum=' + loginUserNum
        };
        socket = io.connect('http://10.80.43.71:9206', opts);
        socket.on('connect', function () {
            console.log("连接成功");
            serverOutput('<span class="connect-msg">连接成功</span>');
        });
        socket.on('push_event', function (data) {
            output('<span class="username-msg">' + data + ' </span>');
            console.log(data);
        });

        socket.on('disconnect', function () {
            serverOutput('<span class="disconnect-msg">' + '已下线! </span>');
        });
    }

    function output(message) {
        var element = $("<div>" + " " + message + "</div>");
        $('#console').prepend(element);
    }

    function serverOutput(message) {
        var element = $("<div>" + message + "</div>");
        $('#console').prepend(element);
    }

    function send() {
        console.log('发送数据');
        socket.emit('realtimeAlarmEvent','');
    }


</script>
</html>

方法三
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>SocketIOClient_V1.0</title>
    <base>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
    <style>
        body {
            padding: 20px;
        }
        #console {
            height: 450px;
            overflow: auto;
        }
        .username-msg {
            color: orange;
        }
        .connect-msg {
            color: green;
        }
        .disconnect-msg {
            color: red;
        }
    </style>
</head>
 
<body>
    <h2>SocketClient_V1.0</h2>
    <div style="border: 1px;"> 
    <label>socketurl:</label><input type="text" id="url" value="http://localhost:9000">
    <br>
    <label>clientId:</label><input type="text" id="clientId" value="123456">
    <br>
    <button id="connect">connect</button>
    <button id="disconnect">disconnect</button>
    
</div>
<br>
<div style="border: 1px;">
    <label>socketEvent:</label><input type="text" id="socketEvent">
    <br>
    <label>content:</label><br><textarea  id="content" maxlength="1000" cols="30" rows="5"></textarea>
    <br>
    <button id="send">send</button>
</div>
<br>
    <div id="console" class="well"></div>
</body>
<script type="text/javascript">
    var socket;
    var errorCount = 0;
    var isConnected = false;
    var maxError = 5;
    // connect(null,null);
 
    function connect(url,clientId) {
        if(url==''||url== null||url==undefined){
            url= 'http://localhost:9000';
        }

        if(clientId==''||clientId==null||clientId==undefined){
            clientId=7729;
        }
        var opts = {
            query: 'clientId='+clientId
        };
        socket = io.connect(url, opts);

        socket.on('connect', function () {
            isConnected =true;
            console.log("连接成功");
            serverOutput('<span class="connect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>连接成功</span>');
            errorCount=0;
        });
        socket.on('message', function (data) {
            output('<span class="username-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>' + data + ' </span>');
            console.log(data);
        });
 
        socket.on('disconnect', function () {
            isConnected =false;
            console.log("连接断开");
            serverOutput('<span class="disconnect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>' + '已下线! </span>');
        });
        socket.on('connect_error', function(data){
            serverOutput('<span class="disconnect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>;' + '连接错误-'+data+' </span>');
            errorCount++;
            if(errorCount>=maxError){
                socket.disconnect();
            }
        });
        socket.on('connect_timeout', function(data){
            serverOutput('<span class="disconnect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>' + '连接超时-'+data+' </span>');
            errorCount++;
            if(errorCount>=maxError){
                socket.disconnect();
            }
        });
        socket.on('error', function(data){
            serverOutput('<span class="disconnect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>' + '系统错误-'+data+' </span>');
            errorCount++;
            if(errorCount>=maxError){
                socket.disconnect();
            }
        });
        socket.on('ack', function(data){
            var str = '消息发送失败';
            if(data==1){
                str = '消息发送成功';
            }
            serverOutput('<span class="connect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>' + str+' </span>');

        });
    }
    
    function output(message) {
        var element = $("<div>" + " " + message + "</div>");
        $('#console').prepend(element);
    }
 
    function serverOutput(message) {
        var element = $("<div>" + message + "</div>");
        $('#console').prepend(element);
    }
   
    $("#connect").click(function(){
        if(!isConnected){
        var url =  $("#url").val();
        var clientId = $("#clientId").val();
        connect(url,clientId);
    }
    })

       
    $("#disconnect").click(function(){
        if(isConnected){
        socket.disconnect();
        }
    })

    $("#send").click(function(){
        var socketEvent =  $("#socketEvent").val();
        var content  = $("#content").val();
        serverOutput('<span class="connect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>' + '发送消息-'+content+' </span>');
        socket.emit(socketEvent,content);
    })
    function getNowTime(){
        var date=new Date();   
        var year=date.getFullYear(); //获取当前年份   
        var mon=date.getMonth()+1; //获取当前月份   
        var da=date.getDate(); //获取当前日     
        var h=date.getHours(); //获取小时   
        var m=date.getMinutes(); //获取分钟   
        var s=date.getSeconds(); //获取秒  
        var ms=date.getMilliseconds(); 
        var d=document.getElementById('Date');    
        var date =year+'/'+mon+'/'+da+' '+h+':'+m+':'+s+':'+ms;  
        return date;
    }
</script>
</html>