web socket测试html

已于 2022-12-08 17:43:22 修改
阅读量555 收藏
点赞数
分类专栏： Utils webSocket 文章标签： 前端 javascript 开发语言
于 2021-11-01 20:48:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiqiu1959/article/details/121088357
版权 
<!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>
一湫1959
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web Socket测试
zauther的专栏
08-02 562
Web Socket测试 后台代码 import java.io.IOException;import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.serv
web测试
weixin_30415113的博客
05-04 449
项目的测试流程大只包含的几个阶段：立项、需求评审、用例评审、测试执行、测试报告文档 一、立项后测试需要拿到的文档 1、需求说明书 2、原型图（及UI图） 3、接口文档 4、数据库字典（表的数量、缓存机制） 二、需求评审 参加人员：开发、测试及需求人员，由需求人员主持讲解。 为了会议的有效举行，测试及开发人员需要在会议开始之前熟悉需求文档及原型，将有疑问 的点标注出来在会议...
html单页面 websocket测试
weixin_45318230的博客
09-21 363
【代码】html单页面 websocket测试。
html页面测试websocket
05-27
html页面测试websocket，只需要改地址，亲测可用。
Html5 中的 WebSocket通信_html5 websocket 通信，2024年最新阿里前端p7面试
最新发布
2401_84138927的博客
04-21 582
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。前端面试题汇总JavaScript前端资料汇总网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
html网页socket,HTML WebSocket
weixin_39599081的博客
06-30 1093
WebSocket是HTML5开始提供的一种单个TCP连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据相互传送。浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器之间就可以通过TCP连接直接交换数据。当你获取Web Socket...
HTML5 WebSocket长连接
low666的博客
03-21 2008
HTML5 WebSocket实现长连接 先介绍一下WebSocket WebSocket的概念 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的...
html 连接 websocket 示例
洪晓鸿
04-17 1722
这个示例使用了一个名为 “ws://example.com/ws” 的 WebSocket 服务器，您需要将其替换为您实际使用的 WebSocket 服务器地址。以下是一个简单的 HTML 页面示例，它连接到 WebSocket 服务器并包含一个文本框、一个发送按钮以及 WebSocket 连接、读取和关闭事件的监听。// 2. 监听 WebSocket 连接事件。// 4. 监听 WebSocket 关闭事件。// 5. 监听 WebSocket 出错事件。
socket.io在express框架中的使用以及简单的html页面示例
weixin_51295863的博客
07-11 1069
如何在express框架中使用socket.io，以及一个简单的html页面作为示例，帮助大家理解socket通信的过程。
web Socket搭建
01-31
WebSocket是Web应用中实现双向通信的关键技术，它允许服务器与客户端之间建立持久的连接，从而实现实时数据传输。在本教程中，我们将探讨如何利用Node.js环境、npm（Node包管理器）以及ws模块来搭建一个WebSocket...
HTML5 Web Socket/Adobe Flash Web Socket支持测试
12-02
但是已经有不少公司提供的浏览器支持HTML5的标准，以下是我通过代码测试（代码提供：Tootallnate）多个流行的浏览器对HTML5的WebSocket的支持情况，同时一同测试了Adobe Flash Web Socket的支持结果。 测试结果表格...
HTML是要SOCKET通讯
06-10
在HTML5中使用SOCKET连接通讯。
Web Socket聊天例子.java eclipse
11-13
为了在浏览器中测试WebSocket应用，你可以创建一个HTML页面，包含上述JavaScript代码。用户可以通过输入框发送消息，然后这些消息将通过WebSocket连接发送到服务器，服务器再将消息广播给所有连接的客户端。 这个...
测试python功能的web项目
05-24
【标题】：“测试python功能的web项目” 这个项目的核心是利用Python进行Web应用程序的开发，目的是测试和验证Python在Web领域的各种功能。Python作为一种多用途、高级编程语言，以其简洁的语法和强大的库支持，...
web-socket-chat
04-01
这个"web-socket-chat"项目很可能是使用WebSocket技术实现的一个实时聊天应用。 TypeScript是JavaScript的一个超集，提供了静态类型检查和现代化的编程特性，使得代码更健壮、更易于维护。 在"web-socket-chat-...
HTML5 前端原生 WebSocket 通信
蚩尤后裔-汪茂雄
10-19 2868
HTML5 WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。 WebSocket 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 很多网站为了实现推送技术，所用的技术都是 Aj...
基于SOCKET编程多人聊天软件HTML+JSON报文
Who_Am_I
06-24 2471
基于socket实现通信，开启一个端口进行监听，当有用户连接，则建立TCP连接，并且保存连接。建立多线程，当有客户端发送消息则对HTTP报文进行处理，并发送响应报文。传输的消息格式为HTTP,正文采用URL+JSON方式。客户端和服务器对传输的HTTP报文提取指令，并做出反馈。实现的编程语言为C#，用到socket编程，C#图形界面，多线程,HTTP协议，以及JSON报文。...
HTML本质介绍(利用socket简单解释)
一清的博客
12-10 3069
HTML本质（一） 1.HTML就是一个人赤裸裸站在这里，CSS就是给这个人穿上衣服，JS让这个人能动能走 2.HTML有很多标签，不过，有些可能一生不用，常用的只有20个 3.CSS里有几种衣服，颜色，位置，等等 4.本质上就是PYTHON的SOCKET服务端，而浏览器本质上就是SOCKET客户端，这里我在python后面会讲到 5.这里导入一个简单的socket模块进行分析（看不懂的
web浏览器设计与实现.doc
11-19
web浏览器设计与实现.doc

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值