socket.io.js最简版单页HTML测试工具

最新推荐文章于 2024-08-08 08:17:07 发布
置顶 最新推荐文章于 2024-08-08 08:17:07 发布
阅读量4.6k 收藏 11
点赞数 11
分类专栏： socket.io js WenSocket 文章标签： js socket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42271561/article/details/107993121
版权
WenSocket 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
socket.io
1 篇文章 0 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏

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>

运行效果图
在这里插入图片描述
连接成功后
在这里插入图片描述
简单实用，是我的菜，爱了

雨developer
关注
专栏目录
socketio-client-tool:该工具可帮助您测试socket.io服务器
05-07
快速测试您的socket.io后端应用 开发环境 VS代码 使用Remote Containers: Reopen in Container 。 这应该使用.devcontainer/devcontainer.json配置来启动开发环境并打开您的工作区。 使用cd dummy-server && npm install在8080上启动本地socket.io服务器，然后npm run dev 。 您可以使用cd react-client-tool && npm install在本地启动客户端应用程序，然后使用yarn start 。
html页面实现socket.io
weixin_38797742的博客
07-11 323
socket.emit 是客户端的事件。socket.on 监听服务端的事件。
Socket.IO: 实时应用程序框架（Node.js服务器）
最新发布
gitblog_00738的博客
08-08 1016
Socket.IO: 实时应用程序框架（Node.js服务器） socket.iosocketio/socket.io: Socket.IO 是一个实时应用框架，提供跨平台的WebSocket兼容解决方案，允许在浏览器和服务器之间进行双向通信，常用于实时聊天、游戏、协同编辑等场景。项目地址:https://gitcode.com/gh_mirrors/so/socket.io 一、项目介绍 So...
WebSocket之socket.io的基本使用
Ghmin的博客
03-19 4556
使用WebSocket可以实现非常多有趣又实用的功能，后面再写一个在线聊天室巩固一下知识。推荐阅读【微信小程序&uniapp系列文章】【Vue实用插件及技巧系列文章】
JS_socket.io简单使用
小歪博客
09-14 1292
JS_socket.io简单使用
初步使用socket.io.js
qq_39432715的博客
09-24 1万+
1.安装node.js 百度下载node.js安装文件，然后安装 2.创建项目 3.创建cmd进到项目里拉插件 拉插件 npm install socket.io npm install express 4.粘贴代码 service.js: var http = require("http"); var express = require("express"); //引入express var socketIo = require("socket.io"); //引入socket.io var a
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
10-23
在本文中，我们将深入探讨如何使用Angular和Node.js、socket.io技术栈来创建一个聊天室应用，特别是多人聊天室的功能。...总的来说，Angular、Node.js和socket.io的结合为构建实时交互的应用提供了强大的工具。
socket-angular:socket.io+angular聊天室
07-07
综上所述，"socket-angular:socket.io+angular聊天室"项目是一个融合了实时通信技术和现代前端开发框架的示例，展示了如何利用JavaScript生态中的工具来创建一个实时互动的在线聊天环境。这个项目涉及的技术广泛，...
angular-socketio:AngularJS应用已连接到socket.io服务器
05-16
"JavaScript" 这个标签确认了项目的编程语言基础，即JavaScript，这是开发Web应用的常用语言，也是AngularJS和socket.io的基础。 **文件名列表：** "angular-socketio-master" 通常表示这是一个GitHub仓库的克隆，...
socketIOStress:一个简单的SocketIO连接压力测试工具
05-13
简单的socketIO压力测试仪
Socket.IO-Test:测试Socket.IO连接的速度
05-15
Socket.IO速度测试 测试Socket.IO连接的速度 ＃＃入门 使用git clone git://github.com/joe-zim-javascript-blog/Socket.IO-Test.git将这个存储git clone git://github.com/joe-zim-javascript-blog/Socket.IO-Test.git到您的计算机上 导航到该存储库，然后键入npm start （在运行之前将自动安装依赖项） 将浏览器导航到http://localhost 。 在此页面上，有两个按钮和一个放置输出的textarea 。 “测试连接速度”按钮将遍历Socket.IO提供的几种传输方式，并尝试使用每种传输方式连接到Socket.IO服务器，然后立即与之断开连接。 结果记录在textarea ，显示每个运输的时间以及所有运输合计的总时间。 “测试消息
在线websocket测试-在线工具.zip
01-04
在线websocket测试-在线工具.zip
Socket通讯模拟工具
02-12
这个工具就是一个能在线模拟socket通讯工具，并且能检测通讯是否能正常响应和发送信息
chatty:聊天示例（Ionic、AngularJS、Socket.IO、NodeJS）
06-21
"Chatty: 聊天示例"是一个项目，它结合了Ionic框架、AngularJS、Socket.IO和NodeJS，创建了一个实时的、交互式的聊天应用。这个项目为开发者提供了一个学习和实践这些技术如何协同工作的实例，特别是对于构建移动和...
Socket接口测试工具 (socket.io.js)
热门推荐
徐同保的专栏
08-31 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Socket接口测试</title> </head> <body> <script src="https://cdn.bootc...
从入门到精通：socket.io全面解析！
m0_72410588的博客
08-15 7941
socket.io 是一个基于事件驱动的实时通信库，可以在浏览器和服务器之间建立持久连接，使得双向实时通信成为可能。它为开发者提供了简单易用的 API，支持跨平台、跨浏览器的实时通信。通过本文的学习，我们了解了 socket.io 的基本概念、使用方法和原理。socket.io 不仅简化了实时通信的开发工作，而且具备跨平台、跨浏览器的优势，是构建现代网络应用的重要工具之一。希望本文对读者在全栈开发中使用 socket.io 起到了一定的帮助作用。socket.io 官方文档。
使用Socket.IO框架的在线消息推送实现
limengshi138392的博客
07-02 1175
在线消息推送实现 需求 在头条的Flask应用中，用户关注后需要推送消息，通过消息队列告知IM服务为用户进行推送 在Socket.IO 框架中可以选择使用以下两种方式作为消息中间件： 使用Redis mgr = socketio.RedisManager('redis://') sio = socketio.Server(client_manager=mgr) 使用RabbitMQ pi...
Socket.IO客户端工具：实时通信的新助力
gitblog_00047的博客
04-14 595
Socket.IO客户端工具：实时通信的新助力 项目地址:https://gitcode.com/amritb/socketio-client-tool 项目简介 在现代Web开发中，实时通信已经成为许多应用的核心需求，比如在线聊天、协作工具和实时数据更新等场景。Socket.IO 是一个流行的JavaScript库，它提供了一个简单易用的API，使得开发者可以在浏览器和服务器之间实现全双工的通信...
怎么升级Socket.IO 或 Engine.IO 协议版本
05-15
要升级 Socket.IO 或 Engine.IO 协议版本，您需要执行以下步骤： 1. 在服务器端，更新 Socket.IO 或 Engine.IO 的版本。 2. 在客户端，更新 Socket.IO 或 Engine.IO 的版本，并确保客户端能够与服务器端连接。 3. 如果您的应用程序使用了自定义协议，请确保在升级版本之后，您的自定义协议仍然能够正常工作。 4. 如果您的应用程序使用了插件或中间件，请确保在升级版本之后，它们仍然能够正常工作。 5. 进行测试，确保升级后的应用程序能够正常工作。 需要注意的是，升级 Socket.IO 或 Engine.IO 可能会导致应用程序中的一些变化，因此在升级之前，您应该先了解新版本中的变化，并准备好相应的变更。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值