javascript（js-h5）的websocket简单封装使⽤例⼦封装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>前端websocket怎么用
myws.js 源码
// -----------------ws api -----------------------------
// 1、提供接⼝myws_start(url)，简单启动ws。
/
/ 2、提供接⼝myws_send(data), 发送数据。
// 3、⽀持⾃动重连，重连间隔5000ms。
//可以在外部实现这⼏个⽅法，以便监听ws事件
//可以在外部实现这⼏个⽅法，以便监听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);
console.log("连接成功...");
if (null != myws_onopen) myws_onopen();
};
if (null != myws_onmessage) myws_onmessage(evt);
};
};
console.log("连接错误...");
if (null != myws_onerror) myws_onerror();
myws_isok = false;
myws_isneedreconnect = true;
};
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);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。