Websocket

使用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)
}