一个简单的 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>
本内容为合法授权发布，文章内容为作者独立观点，不代表开发云立场，未经允许不得转载。
