一个简单的 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)
webSocket = new WebSocket(url, subprotocol);
webSocket.onopen = function () {
var ta = document.getElementById('respText');
webSocket.send(verifyTokenMessage);
ta.value = "连接已建立!";
};
webSocket.onmessage = function (ev) {
var ta = document.getElementById('respText');
ta.value = ta.value + "\n\n" + ev.data;
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') {
console.log("serviceId=" + dataCommon.serviceId);
console.log("msgId=" + dataCommon.msgId);
var resBody = '{"retCode":0,"retMsg":"ok2"}';
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) {
webSocket.send(msg);
} else {
alert("websocket连接尚未开启");
}
}
</script>
</body>
</html>
|