javascript(js-h5)的websocket简单封装使用例子

最新推荐文章于 2024-04-24 09:22:16 发布

可以叫我化十

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量787

点赞数

分类专栏： javascript 文章标签： javascript js vue

本文链接：https://blog.csdn.net/u012910342/article/details/116853253

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

封装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);

可以叫我化十

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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>
复制链接

扫一扫