WebSocket 移动端连接会断开-坑

2019-12-04 admin

<nav id=“sf-header” class=“navbar navbar-expand-lg navbar-light bg-white shadow-sm”></nav>

<input id=“articleId” value=“1190000021196625” class=“hidden”>

<div class=“position-relative”>

<div class=“container my-4”>

<div class=“row”>

<div class=“col-12 col-xl w-0”>

<div class=“card border-0 mb-4”>

<div class=“card-body p-lg-30”>

websoket

  1. WebSocket在web端不会掉线;
  2. WebSocket在移动端会有很多种场景导致连接会断开,所以需要实现一个websocket断开与重连的功能;
  3. Websocket需要与后台实现一个ping,pong的心跳保持,用于监测服务器是否已经断开连接;

websocket建立

var host = getRootPath_dc().replace("http", "ws")+"/mediashow/mediasocket"; //声明host注意:是ws协议
console.log(host);
function getRootPath_dc() {
    var pathName = window.location.pathname.substring(1);
    var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
    if (webName == "") {
        return window.location.protocol + '//' + window.location.host;
    }
    else {
        return window.location.protocol + '//' + window.location.host + '/' + webName;
    }
}

//声明一个对开连接,关闭socket方法
function quit() {
    console.log("Goodbye!");
    socket.close();
    socket = null;
}
//声明一个socket
var socket;
//初始化方法
function initSocket() {
    console.log("websocket: "+host);
    try {
        socket = new WebSocket(host); //新创建一个socket对象
        console.log('WebSocket - status ' + socket.readyState); //将连接的状态信息显示在log
        socket.onopen = function(msg) {
            console.log("Welcome - status " + this.readyState);
        }; //监听打开连接
        //监听当接收信息时触发匿名函数
        socket.onmessage = function(msg) {
            console.log(msg.data);
            var json = msg.data;
            try{
                json = eval("(" + msg.data + ")");
            }catch(e){
            }
            //todo....
        };
        socket.onclose = function(e) {
            console.log("websocket失去连接 - status " + this.readyState);
            console.log(e)
            console.log("正在重连websocket");
            initSocket();
//            setTimeout(function(){
//            }, 2000);
        }; //关闭连接
    } catch (ex) {
        console.log(ex);
    }
}
initSocket();//调用

js文件可以加上定时器,心跳包

window.setInterval(function(){ //每隔1分钟发送一次心跳,避免websocket连接因超时而自动断开
    var ping = {"type":"ping"};
    socket.send(JSON.stringify(ping));
},1000*60);

<div class=“article-author d-flex flex-column flex-sm-row align-items-center pt-4 border-top”>

<div class=“d-flex align-items-center flex-grow-1 author-left”> </div>

<button type=“button” class=“btn btn-primary follow-user sf_do” data-dotype=“post” data-content="{“type”:“state”,“state”:false,“true”:"\u5173\u6ce8\u4f5c\u8005",“false”:"\u6b63\u5728\u5173\u6ce8"}" data-api="/iteration/api/user/1030000018035775/follow">关注作者</button>

</div>

</div>

</div>

推荐阅读

</div>

<div class=“col-12 col-xl-auto”>

<div class=“w-xl-300”>

<div class=“card border-0 mt-4”>

<div class=“card-body”>

<div class=“text-center mb-3”>

<div class=“mb25 hidden-md hidden-sm hidden-xs”>Planets <map name=“gridsMap” id=“gridsMap”></map> </div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

[转载]原文链接:https://segmentfault.com/a/1190000021196625

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-80433.html

文章标题:WebSocket 移动端连接会断开-坑

相关文章
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
回到顶部