Websocket

作者: cca1000 | 来源:发表于2018-02-28 16:50 被阅读0次

    使用WebSocket

    • WebSocket 接受一个url参数,然后使用WebSocket对象的构造函数来建立与服务器之间的通信链接。

    var websocket = new WebSocket('wss://echo.websoket.org');
    注意:URL字符串必须以“ws”或“wss”(加密通信)开头。

    • 建立通信后,可以使用websocket对象的send方法对服务器发送数据,但是只能发送文本数据(但是我们可以使用JSON对象把任何js对象转换成文本数据后再进行发送)

    websocket.send("data");

    • 接受服务起传过来的数据,通过onmessage事件来接受服务器传过来的数据:

    websocket.onmessage = function(event) {
    var data = event.data;
    }

    • 监听socket的打开事件,通过获取onopen事件来监听socket的打开事件:

    websocket.onopen = function(event) {
    //开始通信时的处理
    }

    • 监听socket的关闭事件,通过获取onclose事件来监听socket的关闭事件:

    websocket.onclose = function(event) {
    //通信结束时的处理
    }

    • 通过close方法来关闭socket:

    websocket.close();


    websocket.readyState

    • 可以通过读取readyState的属性值来获取WebSocket对象的状态,readyState属性存在以下几种属性值。
      CONNECTING(数值为0),表示正在链接。
      OPEN(数值为1),表示已建立链接。
      CLOSING(数值为2),表示正在关闭链接。
      CLOSED(数值为3),表示已经关闭链接。

    发送消息demo

    var websocket = new WebSocket('wss://echo.websocket.org');
    websocket.onopen = function(event) {
        console.log('Connection open ...');
        websocket.send('Hello WebSocket');
    }
    websocket.onmessage = function(event) {
        console.log('Received Message: ' + event.data);
        websocket.close();
    }
    websocket.onclose = function(event) {
        console.log('Connection closed.');
    }
    

    再看一个demo,客户端使用websocket技术与服务端进行链接并且发送信息

    <div id="message"></div>
    <input type="text" id="text" placeholder="请输入要发送的文字" />
    <button id="connect" onclick="connect()">建立连接</button>
    <button id="send" onclick="send()">发送数据</button>
    <button id="disconnect" onclick="disconnect()">断开连接</button>
    
    var websocket;
    function connect() {
      var  msg = document.getElementById('message'),
           readyState = ['正在链接','已建立链接','正在关闭','已关闭链接'],
           url = 'wss://echo.websocket.org';
    
      try {
    
        websocket = new WebSocket(url);
        msg.innerHTML += '<p>Socket状态为:' + readyState[websocket.readyState] + '</p>';
        websocket.onopen = (event) => {
          msg.innerHTML += '<p>Socket状态为:' + readyState[websocket.readyState] + '</p>';
        }
        websocket.onmessage = (msg) => {
          msg.innerHTML += '<p>接收到信息:' + msg.data + '</p>';
        }
        websocket.onclose = (event) => {
          msg.innerHTML += '<p>Socket状态为:' +readyState[websocket.readyState] + '</p>';
        }
      } catch(e) {
        msg.innerHTML += '<p>发生异常</p>';
      }
      
    }
    
    function send() {
      var text = document.getElementById('text').value,
          msg  = document.getElementById('message');
      if(text == '') {
        msg.innerHTML += '<p>请输入一些文字</p>';
        return;
      }
      try {
        websocket.send(text);
        msg.innerHTML += '<p>发送数据' +text+ '<p>'
      }catch(e) {
        msg.innerHTMl += '<p>发送数据异常</p>'
      }
      document.getElementById('text').value = '';
    }
    
    function disconnect() {
      websocket.close();
    }
    
    

    发送对象

    • 使用websocket,不仅可以发送文本数据,而且可以使用JSON对象来发送js中的对象,使用JSON对象的关键是使用他的2个方法,JSON.parse方法与JSON.stringify方法,JSON.stringify方法把javascript对象转换成文本数据,JSON.parse方法将文本数据转换为Javascript对象:
    var websocket = new WebSocket('wss://echo.websocket.org');
    websocket.onopen = (event) => {
      console.log('Connection open ...');
      websocket.send(
        JSON.stringify({'msg':'payload'})
      );
    }
    websocket.onmessage = (msg) => {
      console.log(JSON.parse(msg.data));
      websocket.close();
    }
    websocket.onclose = () => {
      console.log('Connection closed.');
    }
    

    发送与接受原始二进制数据

    • 在HTML5中,除了可以使用websocket发送文本数据及对象之外,开可以使用websocket来发送Arraybuffer对象与Bolb对象:
    var websocket = new WebSocket('wss://echo.websocket.com');
    websocket.onopen = (event) => {
      console.log('Connection open ...');
      //发送二进制对象
      var buffer = new ArrayBuffer(128);
      websocket.send(buffer);
      var intview = new Uint32Array(buffer);
      websocket.send(intview);
      var blob = new Blob([buffer]);
      websocket.send(blob);
    }
    websocket.onmessage = (msg) => {
      console.log(msg.data);
      websocket.close();
    }
    websocket.onclose = (event) => {
      console.log('Connection closed.')
    }
    
    
    • 比如上传图片,发送图片二进制数据:
    <input id="file" type="file" name="" value="选择图片" accept="img/*" />
    <button onclick="upload()">上传图片</button>
    
    var websocket = new WebSocket('wss://echo.websocket.com');
    function upload() {
      var file = document.getElementById('file').files[0];
      console.log(file);
      websocket.send(file);
    }
    websocket.onmessage = () => {
      console.log(e.data)
    }
    

    相关文章

      网友评论

          本文标题:Websocket

          本文链接:https://www.haomeiwen.com/subject/zpdbxftx.html