<html>
<head>
</head>
<body>
<a href="javascript:WebSocketTest()">运行 WebSocket</a>
<a href=# onclick="send()">发送消息</a>
</div>
<script>
<!--在引用的页面 的最后 使用以下语句 开启 通信-->
<!--revieMsg 是逻辑处理的function -->
_websocket.init(revieMsg,'');
function send() {
var val = "这是要发送的消息";
<!--发送消息 调用下面的方法-->
_websocket.send(val);
}
function revieMsg(msg) {
console.log(msg);
}
<!--在引用的页面 的最后 使用以下语句 开启 通信-->
</script>
</body>
</html>
<!--将下面的JS copy到一个单独的文件里,在需要的页面添加引用-->
<script type="text/javascript">
let _websocket = {
superWebsocket: false,
isOpen: false,
ws: null,
callback: function (received_msg) {
console.log(received_msg);
},
send: function (msg) {
if (_websocket.superWebsocket && _websocket.isOpen) {
_websocket.ws.send(msg);
}
},
close: function () {
_websocket.ws.close();
},
init: function (_callback,url,hellomsg) {
var _url=url||"ws://127.0.0.1:4046";
if ("WebSocket" in window) {
_websocket.ws = new WebSocket(_url);
_websocket.ws.onopen = function () {
_websocket.isOpen = true;
_websocket.superWebsocket = true;
if(hellomsg){
//延时执行
if(_websocket.ws.readyState == 0){
_websocket.ws.send(hellomsg);
}
if(_websocket.ws.readyState == 1){
setTimeout(function(){
if(_websocket.ws.readyState == 0){
_websocket.ws.send(hellomsg);
}
if(_websocket.ws.readyState == 1){
setTimeout(function(){
_websocket.ws.send(hellomsg);
},1000);
}
},500);
}
}
};
_websocket.ws.onmessage = function (evt) {
var received_msg = evt.data;
if (typeof (_callback) === "function") {
_websocket.callback = _callback;
}
_websocket.callback(received_msg);
};
_websocket.ws.onclose = function () {
_websocket.isOpen = false;
console.log("closed");
};
}
}
};
</script>
比较容易遇到的一个问题就是上一个请求还在“通讯中”,下一个请求时会报错。这个时候就要延时处理