websocket 接口测试 使用js编写 简陋版

最新推荐文章于 2024-05-13 08:47:00 发布
最新推荐文章于 2024-05-13 08:47:00 发布
阅读量716 收藏 1
点赞数
分类专栏： 程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011208800/article/details/88733059
版权

<!DOCTYPE html> 
<html> 
<head> 
    <meta  charset= "UTF-8"  /> 
    <title>websocket测试工具</title> 
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head> 
    <body> 
        <script type="text/javascript"> 
            var socket; 
            var messageNum=0;
            var url;
            var jsonStr;
            
            if (window.WebSocket) { 
                function openws(url){                
                    this.socket = new WebSocket(url); 
                    
                    
                    
                    this.socket.onmessage = function(event) { 
                        messageNum = messageNum + 1;
                        var ta = document.getElementById('responseText'); 
                        var kk = "----------------------------------------------------------------------";
                        ta.value= ta.value  + event.data + messageNum + "\n" + kk + "\n";
                        
                        ta.scrollTop = ta.scrollHeight;
                        
                        jsonStr = event.data;
                        jsonStr = JSON.parse(jsonStr);
                        //console.log(jsonStr)
                        if(jsonStr.data.sortid == "draw"){
                            xx = jsonStr.data.content.xx.split(",");
                            yy = jsonStr.data.content.yy.split(",");
                            
                            window.draw(xx, yy);
                            /*for(i = 0; i < xx.length; i++){
                                x = xx[i];
                                
                                y = yy[i];
                            }*/
                            //console.log(jsonStr.data.content.xx.split(",")[0]);
                            //console.log(jsonStr.data.content.yy.split(",")[0])
                        }
                        if (jsonStr.data.sortid == "insert_page"){
                            console.log(jsonStr.data.content.src);
                            document.getElementById("c1").style.backgroundImage = "url" + "(" + jsonStr.data.content.src + ")" ;
                            //document.getElementById("img1").src = jsonStr.data.content.src;
                        }
                        
                        
                        
                        
                    }
                    
                    this.socket.onopen = function(event) { 
                        var ta = document.getElementById('responseText'); 
                        
                        ta.value = "连接开启!"; 
                    }
                    
                    this.socket.onclose = function(event) { 
                        var ta = document.getElementById('responseText'); 
                        ta.value = "连接关闭"; 
                    }
                }
                
                            
            } else { 
                alert("您的浏览器不支持 WebSocket!"); 
            } 
      
            function send(message) { 
                if (!window.WebSocket) { 
                    return; 
                } 
                
                
                if (socket.readyState == WebSocket.OPEN) { 
                    socket.send(message); 
                } else { 
                    alert("连接没有开启"); 
                } 
            }
            
            function opensocket(){
                url = document.getElementById("i1").value
                if (url == ""){
                    alert("请重新输入连接")
                } else{
                    window.openws(url)
                }
            }
            
            function closeWebsocket(){
                socket.close();
            }
            function sendMessage(){
                if (socket == null){
                    alert("websocket没有连接")
                } else {
                    var message = document.getElementById("ms").value;
                    socket.send(message);
                }
            
            }
            function draw(x, y){
                ele = document.getElementById("c1");
                ctx = ele.getContext("2d");
                ctx.lineWidth = 3;
                ctx.beginPath();
                ctx.moveTo(x[0]*0.4, y[0]*0.4);
                for(i = 1; i < x.length; i ++){
                    ctx.lineTo(x[i]*0.4, y[i]*0.4);
                
                }
                ctx.stroke();
            
            }
             
        </script>
        
        
        
        <div style = "margin-top : 10px;">
        
        <input id = "i1" style = "width:500px" value = "ws://172.31.17.48:9090?topic=2c9f49a06936fb10016947e2775900b9
&userName=霸波奔&userId=1010000001000163460&userRole=0&deviceId=45"/>
            <div  style = "margin:20px;">
            <button style = "margin-left: 100px;" onclick = "opensocket()">连接</button>
            <button style = "margin-left: 100px;" οnclick="closeWebsocket()">断开连接</button>
            </div>
        </div>
        
        <h3 >websocket连接工具</h3> 
        <textarea id="responseText" style="width: 500px; height: 300px;resize:none" placeholder="显示消息"></textarea> <br />    
        <div>
            <textarea  id = "ms" style="width: 500px; height: 200px; resize:vertical;" ></textarea> <br />
            <input  type = "button" value = "发送" onclick = "sendMessage()" style = "width:500px; margin:0px" />
        </div>    
        
        
         
        <canvas width = "760" height = "480" id = "c1"></canvas>
        
        
    </body>
<html>

 

 

super_encoding
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
websocket·测试代码
ren762201592的专栏
06-29 844
websocket服务端测试，使用postman无法测试。那接下来我们使用自己写的js来测试。直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docu...
前端Js WebSocket测试代码，连websocket.org
编程架构三分天下：分层、分治、分时序。
10-22 2074
连接ws://echo.websocket.org/进行测试，代码如下： <script> function initWebSocket(wsUri) { var websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { console.log('open...'); }; websocket.onclose = func
JS/TS项目中使用websocket与protobuf
最新发布
油墨香^-^的博客
05-13 89
在发送消息时，可以先将消息对象序列化成二进制数据，然后再通过WebSocket发送：​​​​​​​。例如，可以创建一个Message对象并设置内容：​​​​​​​。然后，使用Protobuf库的命令行工具将.proto文件编译成对应的JS/TS文件：​​​​​​​。在接收消息时，可以先将接收到的二进制数据反序列化成消息对象，然后再进行处理：​​​​​​​。然后，可以将Message对象序列化成二进制数据：​​​​​​​。事件来处理接收到的消息：​​​​​​​。文件：​​​​​​​。
JS---- websocket 前端测试页面
Damys
06-08 679
var websocket = {}; function openSocket() { var userId = document.getElementById('userId').value; if (userId == "" ) { console.warn("roleId, 不能为空") return; } if ('WebSocket' in window) { if (websocket != null) { websocket.CLOSED; websocke
js实现websocket服务端和客户端
分享式获得也是一种学习的态度
09-12 3747
每个人都有惰性，但不断学习是好好生活的根本，共勉！
js 链接websocket马上断开_自制WebSocket测试工具(前端篇)
weixin_39632212的博客
11-29 435
导读小编昨天花了一个小时自制了一个WebSocket测试小工具，和网络上搜索到的在线工具类似，可以实现WebSocket的连接、断开和发送等功能，同时还加上了一些颜色来区别。那么我们先来看看效果吧，这里展示的是实时日志功能。此篇文章仅展示前端代码(代码部分请左右滑动查看)。代码部分看完效果之后话不多说直接上WebSocket核心代码,通常分为连接、接收、发送、异常...
spring-websocket-test:SpringWebsocket测试
05-25
4. **模拟服务器响应**：在服务器端，我们需要编写测试用例来模拟WebSocket消息的处理，包括控制器方法的测试，确保消息能够正确路由到相应的业务逻辑。 5. **测试工具**：Spring提供了`WebSocketTestClient`工具，...
WebSocket测试demo
05-27
在Java中，可以使用`WebSocketContainer`来创建连接，或者直接使用浏览器的WebSocket API（`new WebSocket("ws://服务器地址/聊天路径")`）。 在这个WebSocket Demo中，"websocketDemo"可能包含以下内容： 1. `...
在Spring3.3版本中使用4.0中的WebSocket
03-13
9. **测试**：编写单元测试和集成测试来验证WebSocket的正确性和性能。 总之，Spring 3.3版本中对WebSocket的支持让Java开发者能够轻松地在应用中实现双向通信功能。通过合理配置和使用WebSocket，我们可以构建出...
websocket使用实例(spring mvc)
02-24
测试WebSocket应用可能需要使用专门的工具，如`websocket.org/echo.html`或编写自动化测试用例。此外，日志记录可以帮助调试连接问题和消息传递问题。 以上就是Spring MVC中WebSocket的使用实例，通过这些步骤，你...
php+websocket聊天室以及简单测试
06-25
这个客户端可以是浏览器上的JavaScript代码，使用WebSocket API连接到服务器，并实现发送和接收消息的功能。JavaScript的WebSocket对象提供了`connect`、`send`、`close`和`onmessage`等方法，用于与服务器交互。 ...
webSocket心跳检测思路及代码实现.html
01-15
webSocket心跳检测机制及代码思想 次文章只是提供一下本人设计思路 心跳检测有很多方式可以实现在此 只是为大家提供一下思路大家一起相互学习 一起进步
html5 websocket+nodejs测试代码
07-25
html5 websocket+nodejs测试代码 iostat压缩包.
WebSocketTest:Javascript 的 WebSocket 测试程序
06-13
网络套接字测试 Javascript 的 WebSocket 测试程序
简单的websocket测试页面
sunzhongjiang001的博客
10-23 1882
项目中用到了websocket，但是自己做测试的时候不知道怎么弄，让前端给做了一个简单的html测试页面，记录一下 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="../../library/jquery3/jquery3.min.js" type="text/ja.
WebSocket 测试工具
热门推荐
ideal-lingyun
03-21 1万+
WebSocket 测试工具
最简单的websocket客户端Js测试，适合谷歌浏览器,C#服务器端
dacong的专栏
02-22 4459
最简单的websocket客户端Js测试，适合谷歌浏览器,C#服务器端
Javascript中使用protobuf
first_shun的博客
10-03 5884
protobuf是由google推出的和语言无关和平台无关，可扩展的序列化数据结构协议，类似于XML，但是比XML更小、更快、更简单。protobuf几乎支持当前的大部分语言，当然也支持JavaScript。 JavaScript使用protobuf主要有如下几个步骤： 1、下载一个编译protobuf的js编译器。 https://github.com/protocolbu...
php protobuf安装与前端js交互（四）：PHP与js通讯交互
林龙
03-24 623
bb
websocket接口自动化测试
08-24
总之，WebSocket接口的自动化测试需要使用合适的自动化测试框架和工具，了解WebSocket的工作原理和协议，编写测试脚本来模拟和验证WebSocket请求和返回的数据。这样可以提高测试效率和质量，确保WebSocket接口的稳定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值