WebSockets通信

javascript/jquery

浏览数:137

2019-8-17

AD:资源代下载服务

WebSockets通信

1. websocket是什么?
WebSocket是一种网络通信协议。
2. 为什么需要websocket?
我们有http协议,为什么还需要websocket协议呢?
因为http协议有一个缺陷,通信只能是客户端发起请求的,服务器端返回查询结果。比如说 我想知道一个实时新闻,那么每次新闻更新后,我都要刷新页面
,发起客户端请求,服务器端返回结果。不能做到服务器端推送消息给客户端,当然我们可以使用轮询,看看服务器有么有新的消息,比如 “聊天室” 这样的,但是轮询效率非常低的,因此websocket就这样产生了。

websocket最大的优点是:服务器可以主动向客户端推送消息,客户端也可以主动向服务器端发送消息。
使用websockets可以在服务器与客户端之间建立一个非http的双向链接。这个链接是实时的,也是永久的(除非被关闭),当服务器想向客户端发送
数据时,可以立即将数据推送到客户端的浏览器中,无需重新建立链接,只要客户端有一个被打开的socket(套接字)并且与服务器建立链接,服务器就可以
把数据推送到这个socket上。

3. 如何使用websocket?
WebSocket接收一个url参数,然后调用WebSocket对象的构造器来建立与服务器之间的通信链接。
如下代码初始化:

var websocket = new WebSocket(‘wss://echo.websocket.org’);

注意:URL字符串必须以 “ws” 或 “wss”(加密通信)开头。

如上代码,通信链接建立好之后,就可以进行客户端与服务器端的双向通信了。可以使用websocket对象的send方法对服务器发送数据,但是只能
发送文本数据(但是我们可以使用JSON对象把任何js对象转换成文本数据后再进行发送)。

3-1 使用send方法的代码如下:

websocket.send(“data”);

3-2 接收服务器传过来的数据
通过onmessage事件来接收服务器传过来的数据,如下代码:

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

3-3 监听socket的打开事件
通过获取onopen事件来监听socket的打开事件。如下代码:

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

3-4 监听socket的关闭事件
通过获取onclose事件来监听socket的关闭事件。如下代码:

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

通过close方法来关闭socket, 如下代码:

websocket.close();

3-5 webSocket.readyState

可以通过读取readyState的属性值来获取WebSocket对象的状态,readyState属性存在以下几种属性值。

CONNECTING(数字值为0), 表示正在连接。
OPEN(数字值为1),表示已建立连接。
CLOSING(数字值为2),表示正在关闭连接。
CLOSED(数字值为3),表示已关闭链接。

4. 发送消息demo
请看效果演示

如下代码:

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

4-1 下面再看一个demo,客户端使用websocket技术与服务器端进行连接并且发送信息的demo,代码如下:

var websocket;
function connect() {
  var msg = document.getElementById('message');
  try {
    var readyState = new Array("正在连接", "已建立连接", "正在关闭连接", "已关闭连接");
    var url = "wss://echo.websocket.org";
    websocket = new WebSocket(url);
    msg.innerHTML +="<p>Socket状态为:"+readyState[websocket.readyState]+"</p>";
    websocket.onopen = function() {
      msg.innerHTML += "<p>Socket状态为"+readyState[websocket.readyState]+"</p>"
    }
    websocket.onmessage = function(msg) {
      msg.innerHTML += "<p>接收信息:"+msg.data+"</p>";
    }
    websocket.onclose = function() {
      msg.innerHTML += "<p>Socket状态为:"+readyState[websocket.readyState]+"</p>"
    }
  } catch(e) {
    msg.innerHTML += "<p>发生异常了</p>";
  }
}
function send() {
  var text = document.getElementById('text').value;
  var 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();
}

查看demo预览

4-2 发送对象
使用websocket,不仅可以发送文本数据,而且可以使用JSON对象来发送JS中的对象,使用JSON对象的关键是使用它的两个方法,
JSON.parse方法与JSON.stringify方法,JSON.stringify方法把javascript对象转换成文本数据,JSON.parse方法将文本数据转换为Javascript对象。如下代码演示:

<!DOCTYPE html>
<html>
  <head>
    <title>websocket</title>
    <style>
      
    </style>
  </head>
  <body>
    <script>
      var websocket = new WebSocket('wss://echo.websocket.org');
      websocket.onopen = function(e) {
        console.log('Connection open ...');
        websocket.send(
          JSON.stringify({
            'msg': 'payload'
          })
        );
      }
      websocket.onmessage = function(e) {
        console.log(JSON.parse(e.data));
        websocket.close();
      }
      websocket.onclose = function(e) {
        console.log('Connection closed.');
      }
    </script>
  </body>
</html>

效果查看预览

4-3 发送与接收原始二进制数据
在HTML5中,除了可以使用websocket发送文本数据以及对象之外,还可以使用websocket来发送ArrayBuffer对象与Bolb对象。如下代码:

<!DOCTYPE html>
<html>
  <head>
    <title>websocket</title>
    <style>
      
    </style>
  </head>
  <body>
    <script>
      var websocket = new WebSocket('wss://echo.websocket.org');
      websocket.onopen = function(e) {
        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 = function(e) {
        console.log(e.data);
        websocket.close();
      }
      websocket.onclose = function(e) {
        console.log('Connection closed.');
      }
    </script>
  </body>
</html>

预览效果

比如上传图片,发送图片二进制数据如下:

<!DOCTYPE html>
<html>
  <head>
    <title>websocket</title>
    <style>
      
    </style>
  </head>
  <body>
    <input type="file" value="选择图片" id="file" accept="image/*"/>
    <button onclick="upload()">上传图片</button>
    <script>
      var websocket = new WebSocket('wss://echo.websocket.org');
      function upload() {
        var file = document.getElementById('file').files[0];
        console.log(file)
        websocket.send(file);
      }
      websocket.onmessage = function(e) {
        console.log(e.data);
      }
    </script>
  </body>
</html>

预览效果

作者:龙恩0707