IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 网络协议 -> websocket 客户端测试工具 -> 正文阅读

[网络协议]websocket 客户端测试工具

一个简单的 websocket 客户端测试工具(html页面)
基于自定义的 websocket 协议,后端服务是一个基于Netty的websocket Server

<!DOCTYPE html>
<html>
    <head>
        <title>WebSocket 客户端工具</title>
    </head>
    <body>

        <form onsubmit="return false;">
            ip地址 <input type="text" name="ipaddr" value="ws://127.0.0.1:7008/drpc"/> 子协议 <input type="text" name="subprotocol" value="drpcjson"/> <input type="button"
                                                                                                                                                         id="btnConnection"
                                                                                                                                                         value="连接"
                                                                                                                                                         onclick="openConn(this.form.ipaddr.value,this.form.subprotocol.value)"/><br/><br/>
            <textarea name="reqMsg" style="width: 1000px;height: 200px"></textarea>
            <input type="button" id="btnSend" value="发送请求" onclick="sendMsg(this.form.reqMsg.value)"/><br/><br/>
            <textarea name="resMsg" id='respText' style="width: 1000px;height: 1000px"></textarea>
            <input type="button" onclick="javascript: document.getElementById('respText').value=''" value="清空数据"/>
        </form>

        <script>

            var webSocket;

            function openConn(url, subprotocol) {
                if (!window.WebSocket) {
                    alert("不支持websocket");
                    return;
                }

                var seq = 1;
                var bodyData = '{"accessToken": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJ1aWQiOiIyZmI4MzY0YTAzZDc0MDdjODFiNzk1OTk4MzAzMjlmNyIsImRldmljZUlkIjoiMjgxOEQyNy1CM0Y2LTQ2QjYtOUZDMi1FNDZERkVDMUMzMkUiLCJleHBpcmVJbiI6MTY3ODI0MzY1MjAzNCwiY3JlYXRlVGltZSI6MTY0NjcwNzY1MjAzNCwicGxhdGZvcm1Db2RlIjoyLCJhcHBJZCI6InNhaWNfY2FyZDRzYWFzIiwiY2hhbm5lbENvZGUiOiJjaGFubmVsQ29kZTAxIn0.jUKEbPuYJhOEp-F3PxI12kQEXozkVVm5n6udIYXI124HhYbREJFdc9lV2NQhsMPsEE03fKyXObFFk1Nut0OcQgEogQks9Zcd4lT68tCnxgbIXXxCqlrqTglcM1LkB6H9cDdGbSlqDLPlhan1KcSL4Tz3Evud71CSygDPxiZzTfVHt2hkJ4Jwtv68UAHhIzyvPmEL5UvHc1a-41uS_5U25j1w8tmGxZbnCHUpNktA6l57hxFjjjt7Ilvsoxrc3NKXj7xvqsyigWAiJwvhJBR9dUUvgK4JX12hjXtYxled_bbPP4mKf00bAXDHZlz2mZDpCF-AU-Ph3QV2oK30MOSBMA","appId":"gaodeapp","productId":1,"platform":"1","deviceId":"99999-B3F6-46B6-9FC2-E46DFEC18888"}';
                var verifyTokenMessage = '{ "direction": 1,"serviceId": ' + '9999' + ',"msgId": ' + '66' + ',"sequence": ' + (seq) + ',"clientId": ' + 'DACD932F6C284A95A4D0091CB6231666' + '}###' + (bodyData)
                //地址 ws://127.0.0.1:7008/drpc
                //子协议 drpcjson
                webSocket = new WebSocket(url, subprotocol);
                webSocket.onopen = function () {
                    var ta = document.getElementById('respText');
                    //发送一个校验token的消息,token校验成功才算是业务连接成功
                    webSocket.send(verifyTokenMessage);
                    ta.value = "连接已建立!";
                };

                webSocket.onmessage = function (ev) {
                    //解析来自服务端的数据,做相应的业务逻辑处理
                    var ta = document.getElementById('respText');
                    ta.value = ta.value + "\n\n" + ev.data;
                    //do business
                    var jsonstr1 = ev.data.split("###")[0];
                    var jsonstr2 = ev.data.split("###")[1];
                    var dataCommon = JSON.parse(jsonstr1);
                    var dataBusiness = JSON.parse(jsonstr2);
                    console.log("dataCommon=" + JSON.stringify(dataCommon));
                    console.log("dataBusiness=" + JSON.stringify(dataBusiness));
                    if (dataCommon.serviceId == '9999' && dataCommon.msgId == '66') {//客户端需要响应服务端的push消息;服务端有多个push类型的服务号和消息号,详情咨询对应开发
                        console.log("serviceId=" + dataCommon.serviceId);
                        console.log("msgId=" + dataCommon.msgId);
                        var resBody = '{"retCode":0,"retMsg":"ok2"}';//客户端直接返回服务端成功的响应即可,响应的sequence取自服务端消息中的sequence;如果客户端不发送响应消息,服务端会显示push超时
                        var respMsg = '{"direction":2,"serviceId":' + '9999' + ',"msgId":' + '66' + ',"sequence":' + (dataCommon.sequence) + ',"retCode":' + '0' + '}###' + (resBody);
                        console.log("respMsg=" + respMsg);
                        webSocket.send(respMsg);
                    }
                };

                webSocket.onclose = function (ev) {
                    var ta = document.getElementById('respText');
                    ta.value = ta.value + "\n\n" + "连接已关闭!";
                };

                webSocket.onerror = function (ev) {
                    alert("error");
                };
            }

            function sendMsg(msg) {
                if (!window.WebSocket) {
                    alert("不支持websocket");
                    return;
                }

                if (webSocket.readyState == WebSocket.OPEN) {
                    //msg消息的格式咨询对应接口开发人员,格式参考 {"direction":1,"serviceId":9999 ,"msgId":3333 ,"sequence":1,"clientId":"888D27-B3F6-46B6-9FC2-E46666"}###{"appId":"myapp","deviceId":"99999-B3F6-46B6-9FC2-E46DFEC18888","reqId":"10001","content":"{\"keyx\":\"valuex\"}"}
                    webSocket.send(msg);
                } else {
                    alert("websocket连接尚未开启");
                }
            }

        </script>
    </body>
</html>

  网络协议 最新文章
使用Easyswoole 搭建简单的Websoket服务
常见的数据通信方式有哪些?
Openssl 1024bit RSA算法---公私钥获取和处
HTTPS协议的密钥交换流程
《小白WEB安全入门》03. 漏洞篇
HttpRunner4.x 安装与使用
2021-07-04
手写RPC学习笔记
K8S高可用版本部署
mySQL计算IP地址范围
上一篇文章      下一篇文章      查看所有文章
加:2022-03-13 22:11:44  更:2022-03-13 22:11:58 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/26 6:46:46-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码