封装websocket后的功能
1、提供接口myws_start(url),简单启动ws。
2、提供接口myws_send(data), 发送数据。
3、支持自动重连,重连间隔5000ms。
源码和环境准备
1、封装的websocket保存为 myws.js, 源码见后文。
2、使用 index.html 进行测试:。
3、在浏览器按F12打开开发者窗口,在console控制台查看打印的日志。
index.html 源码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>测试-Websocket</title>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">启动 WebSocket</a>
<br />
<a href="javascript:WebSocketSend()">发送数据</a>
</div>
<!----必须先引入myws.js,再使用---->
<script type="text/javascript" src="./myws.js"></script>
<script type="text/javascript">
var ws_url = "ws://localhost:8282";
// 初始化ws
function WebSocketTest() {
myws_start(ws_url);
}
function WebSocketSend () {
console.log("into WebSocketSend");
myws_send("abc");
}
// 监听建立连接
function myws_onopen() {
// Web Socket 已连接上,可使用 myws_send() 方法发送数据
console.log("数据发送中...");
myws_send("发送数据");
};
// 监听收到消息
function myws_onmessage(evt) {
var received_msg = evt.data;
console.log("数据已接收...", received_msg);
};
// 监听关闭 websocket
function myws_onerror() {
};
// 监听关闭 websocket
function myws_onclose() {
}
</script>
</body>
</html>
myws.js 源码
// -----------------ws api -----------------------------
// 1、提供接口myws_start(url),简单启动ws。
// 2、提供接口myws_send(data), 发送数据。
// 3、支持自动重连,重连间隔5000ms。
//可以在外部实现这几个方法,以便监听ws事件
//function myws_onopen() {};
//function myws_onmessage() {};
//function myws_onerror() {};
//function myws_onclose() {};
// =================以下提供对外使用接口==================
// 供外部启动ws,只需调用一次
function myws_start(url) {
myws_start_init(url);
}
// 供外部发送数据。
function myws_send(data) {
myws_send_data(data);
}
// =================以下代码,外部不需要关注==================
// =================以下代码,外部不需要关注==================
var myws = null;
var myws_url_0 = "";
var myws_init = false;
var myws_isok = false;
var myws_reconnect_interval_ms = 5000;
var myws_isneedreconnect = false;
var myws_onopen = null;
var myws_onmessage = null;
var myws_onerror = null;
var myws_onclose = null;
// 启动ws,只需调用一次
function myws_start_init(url) {
if (true == myws_init) {
console.log("no need to repeat start..");
return;
}
myws_init = true;
myws_url_0 = url;
myws_connect();
}
// 供外部发送数据。
function myws_send_data(data) {
if( true == myws_isok ) {
myws.send(data);
} else {
console.log("websocket is not ok..");
}
}
// 连接
function myws_connect() {
if ("WebSocket" in window) {
console.log("您的浏览器支持 WebSocket!");
// 打开一个 web socket
myws = new WebSocket(myws_url_0);
myws.onopen = function() {
console.log("连接成功...");
if (null != myws_onopen) myws_onopen();
};
myws.onmessage = function(evt) {
if (null != myws_onmessage) myws_onmessage(evt);
};
myws.onerror = function() {
console.log("连接错误...");
if (null != myws_onerror) myws_onerror();
myws_isok = false;
myws_isneedreconnect = true;
};
myws.onclose = function() {
console.log("连接已关闭...");
if (null != myws_onclose) myws_onclose();
myws_isok = false;
myws_isneedreconnect = true;
};
myws_isok = true;
} else {
// 浏览器不支持 WebSocket
console.log("您的浏览器不支持 WebSocket!");
}
}
function myws_reconnect() {
myws_connect();
}
function myws_checkconnect() {
if (false == myws_isok && true == myws_isneedreconnect) {
myws_isneedreconnect = false;
console.log("准备自动重连...");
myws_reconnect();
}
}
setInterval(function(){
myws_checkconnect();
}, myws_reconnect_interval_ms);