Back

websocket - 检查网络并重连websocket

发布时间: 2019-08-30 03:02:00

参考:http://www.phpernote.com/html5/1370.html

1. 检查网络问题:  https://github.com/hubspot/offline

2. 断线重连:https://github.com/joewalnes/reconnecting-websocket

使用offline: 

1. 增加css  

2. 增加js 

3. 增加language 

app/assets/javascripts/offline.min.js
app/assets/stylesheets/offline-language-chinese-simplified-indicator.css
app/assets/stylesheets/offline-language-chinese-simplified.css
app/assets/stylesheets/offline-theme-default-indicator.css
app/assets/stylesheets/offline-theme-default.css

总之就是上面这些内容。

这些内容放上去之后,页面就会出现各种提示了。(可以把网线拔了看看)

4. 关键的代码解释:

// offline
Offline.options = {
  checks: {
    xhr: {
      url: '/server_time'
    }
  }
}

Offline.on('checking', function(){
  console.info('checking...')
})

下面这个是文字提示的高度。默认是整个屏幕。

<style>
.offline-ui {
  height: 42px;
}
</style>

Back