天天看點
傳回

socket.io.js最簡版單頁HTML測試工具

socket.io.js最簡版單頁HTML測試工具

socket.io基于WebSocket協定封裝，相容不支援ws的浏覽器采用ajax輪詢，socket.io為開發者提供服務端和用戶端兩套庫，無需了解全部ws底層原理，好入門，上手快。學會socket.io後可搭建類似QQ和微信這種即時通信工具的Web版，既可以一對一對話也可開房間組隊建立聊天群組，我嘗試過傳輸的媒體類型有文本、圖像兩種，資料都可由1和0表示，是以理論上可傳輸任何媒體形式。

廢話不多說上代碼

var socket; //socket對象
    var errorCount = 0; //連接配接錯誤次數
    var isConnected = false; //連接配接狀态
    var maxError = 5; //最大連接配接錯誤次數
    // connect(null,null);
 
    //socket連接配接方法 
    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
        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;
    }

完整代碼-copy到本地，隻要有網絡便可以運作

<!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>

運作效果圖

socket.io.js最簡版單頁HTML測試工具

連接配接成功後

socket.io.js最簡版單頁HTML測試工具

簡單實用，是我的菜，愛了

socket.io js WenSocket socket
上一篇: RS232、RS485和TTL電平與串行通信RS232、RS485和TTL
下一篇: RS232和RS485概念與差別

繼續閱讀