websocket


  
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>socket测试</title>

    <!-- Bootstrap -->
    <link href="http://cdn.mark.ah.cn/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <div class="container">
      <form>

        <div class="form-group">
          <label >请输入:</label>
          <input type="text" class="form-control" id="textInput" placeholder="请输入" maxlength="100">
        </div>

        <div class="form-group text-center">

          <button type="button" class="btn btn-info" id="sendBtn">发送</button>

          <button type="button" class="btn btn-warning"  id="clearBtn">清空记录</button>

          <button type="button" class="btn btn-success" id="mockBtn">模拟断开连接</button>

          <button type="button" class="btn btn-danger" id="closeBtn">完整关闭</button>

          <button type="button" class="btn btn-success" id="reConnectBtn">重连</button>

        </div>

        <div class="form-group">
          <label >服务端返回应答消息:</label>
          <div id="respondDiv">
            
          </div>
        </div>

      </form>
    </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.mark.ah.cn/jquery/1.11.3/jquery-1.11.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.mark.ah.cn/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  </body>

  <script type="text/javascript">
    //下划线表示是内部私有方法，推荐外部不进行调用
    $(function (){
      var OriocSocket = function(opt){
        var options = opt || {}
        if (!options.url) {
          options.url = 'ws://192.168.3.250:8263/ws';
        }
        this.options = options;

        //接收到消息的回调处理方法
        this.onMsg = options.onMsg
        //通道开启事件回调
        this.onSocketOpen = options.onSocketOpen
        //通道关闭事件回调
        this.onSocketClose = options.onSocketClose
        //登录回调
        this.onLogin = options.onLogin
        //掉线
        this.onDisconnect = options.onDisconnect

        //loginKey 是socket 通道的唯一识别标志，
        //后端通过这个标志向客户端发送消息
        this.loginKey = options.loginKey

        //初始化
        this.init = function (){
          if (!this._checkUsable()) {
            alert('您的浏览器不支持webSocket');
            return ;
          }
          //默认连接标志为false
          this.socketConnected = false;

          try {
            //初始化socket
            this._initSocket()
            //初始化socket相关事件
            var that = this
            this._initSocketEvents(function (){
              //执行login方法
              that._login(that.loginKey);
              that.socketConnected = true;
            })
          } catch(e) {
            //初始化连接失败
            console.log('初始化连接失败');
            console.log(e);
            this.socketConnected = false;
            this.onDisconnect && this.onDisconnect()
          }
          //初始化心跳连接,在心跳的时候进行连接健康检查，
          //发现有问题直接进行重连
          this._initSocketHeartBeat();
        };

        //发送消息
        this.sendMsg = function (_content){
          if (!this.socketConnected) {
            throw Error('socket通道已关闭')
          }
          this._sendFormattedMsg(this.loginKey,'Publish',_content)
        };

        //主动关闭通道
        //主动关闭之后再次开启需要调用init
        this.close = function (){
          console.log('关闭通道');
          try {
            this.socket && this.socket.close()
          } catch (e) {}
          //清理socket实例
          this.socket = null;
          //清理心跳定时器
          var _interval = this.heartbeatInterval
          if (_interval) {
            try {
              clearInterval(_interval)
              console.log('心跳已关闭')
            } catch (e) {}
          } 
          this.socketConnected = false;
        };

        //模拟断开连接
        //未暂停心跳机制，10秒后会自动重连
        this.mockDisconnect = function (){
          try {
            this.socket.close()
          } catch (e) {}
          this.socketConnected = false;
        };

        //检查是否可用
        this._checkUsable = function (){
          if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
          }
          if (!window.WebSocket) {
            return false;
          }
          return true;
        };
        
        //初始化socket
        this._initSocket = function (){
          var url = this.options.url;
          this.socket = new WebSocket(url);
        };

        //初始化socket事件
        this._initSocketEvents = function (_openedCallback){
          var that = this
          //接收到消息
          that.socket.onmessage = function(event){
            if (!event.data) {
              return ;
            }
            that.onMsg && that.onMsg(event.data); 
          }
          //通道开启
          that.socket.onopen = function (){
            console.log('socket 通道已开启');
            _openedCallback && _openedCallback()
            that.onSocketOpen && that.onSocketOpen()
          }

          //断开，暂时先自动重连
          that.socket.onclose = function (){
            that.onDisconnect && that.onDisconnect()
            that.onSocketClose && that.onSocketClose()
          }

          that.socket.onerror = function (err){
            console.log('socket 异常 ',err);
          }


        };

        //通道开启后执行登录方法
        this._login = function (){
          var that = this
          this._sendFormattedMsg(this.loginKey,'Login', new Date().getTime(),function (err){
              if (err) {
                console.log('登录失败');
              }else{
                that.onLogin && that.onLogin()
              }
          })
        };

        //初始化socket心跳机制
        this._initSocketHeartBeat = function (){
          var _interval = this.heartbeatInterval
          if (_interval) {
            try {
              clearInterval(_interval)
            } catch (e) {}
          } 

          _interval = null;
          //心跳10秒一次
          var that = this
          _interval = setInterval(function (){
            if (that.socket.readyState != that.socket.OPEN) {
              //如果未连接，重新进行连接
              //重连之后直接进行登录
              that._reconnect();
              //连接后重新发送心跳
              that._sendBeatMsg();
            }else{
              //连接后重新发送心跳
              that._sendBeatMsg();
            }
            
          }, 1000*10)
          this.heartbeatInterval = _interval
        };

        //发送心跳数据
        this._sendBeatMsg = function (_callback){
          this._sendFormattedMsg(this.loginKey,'HeartBeat',
            new Date().getTime(),function (err){
              console.log('242 ',err);
              _callback && _callback(err)
          })
        };

        //断线重连
        this._reconnect = function (){
          try {
            this.socketConnected = false;
            //初始化socket
            this._initSocket()
            //初始化socket相关事件
            var that = this
            this._initSocketEvents(function (){
              //执行login方法
              that._login(that.loginKey);
              that.socketConnected = true;
            })
          } catch(e) {
            //初始化连接失败
            console.log('断线重连失败',new Date());
            console.log(e);
            this.socketConnected = false;
          }
        };

        //发送格式化的数据
        this._sendFormattedMsg = function (_userKey,_msgType,_content,_callback){        
          try {
            this.socket.send(JSON.stringify({
              type: _msgType,
              userId: _userKey,
              content: _content
            }));
            console.log('275 null')
            _callback && _callback()
          } catch (e) {
            console.log('sendFormattedMsg 消息发送失败',_userKey,_msgType,_content,new Date());
            console.log('278',e);
            _callback && _callback(e)
          }
          
        }
      };

      //挂载到window
      window.OriocSocket = OriocSocket;
    })

    $(function (){
      
      var socketInstance = new window.OriocSocket({
        url: '',
        //暂时面向整个救援web推送
        loginKey: 'RescureWeb',
        //收到消息
        onMsg: function (_content){
          $('#respondDiv').append($('<p>收到消息: ' + _content + '</p>'))
        },
        //通道开启
        onSocketOpen: function (){
          $('#respondDiv').append($('<p>通道开启</p>'))
        },
        //通道关闭
        onSocketClose: function (){
          $('#respondDiv').append($('<p>通道关闭</p>'))
        },
        onLogin: function (){
          $('#respondDiv').append($('<p>已登录</p>'))
        },
        onDisconnect: function (){
          $('#respondDiv').append($('<p>连接断开</p>'))
        }
      })

      socketInstance.init();

      //点击发送按钮
      $('#sendBtn').click(function (){
        var textInput = $('#textInput').val();
        if (!textInput || textInput.trim() == '') {
          return ;
        }
        socketInstance.sendMsg(textInput);
        $('#respondDiv').append($('<p></p>').text('发送:'+textInput));
        $('#textInput').val('');
      })

      //点击清理按钮
      $('#clearBtn').click(function (){
        $('#respondDiv').empty();
      })

      $('#mockBtn').click(function (){
        socketInstance.mockDisconnect();
        $('#respondDiv').append($('<p></p>').text('模拟断开连接'));
      })

      $('#closeBtn').click(function (){
        socketInstance.close();
        $('#respondDiv').append($('<p></p>').text('完整关闭'));
      })

      $('#reConnectBtn').click(function (){
        socketInstance.close();
        socketInstance.init();
        $('#respondDiv').append($('<p></p>').text('重连'));
      })

      
    })

  </script>
</html>
posted @ 2020-05-06 14:50  cmwang2017  阅读(164)  评论(0)  编辑  收藏  举报