WebSocket基本使用

一、客户端

1.全局使用

1.配置

//webSocketPlugin.js
export default {
  install(Vue) {
    let socket = null;
    let reconnectInterval = 60000; // 重连间隔时间（毫秒）

    connect();

    function connect() {
      socket = new WebSocket('ws://192.168.0.55:9979/api/show/websocket/12');

      socket.onopen = () => {
        console.log('WebSocket连接已打开');
      };

      socket.onclose = () => {
        console.log('WebSocket连接已关闭');
        reconnect();
      };

      socket.onerror = () => {
        console.error('WebSocket连接发生错误');
        reconnect();
      };
    }
    function reconnect() {
      setTimeout(() => {
        console.log('尝试重新连接WebSocket...');
        connect();
      }, reconnectInterval);
    }

    Vue.prototype.$socket = socket;

    Vue.mixin({
      created() {
        this.$socket = socket;
      }
    });
  }
};

//main.js
import Vue from 'vue'

import WebSocketPlugin from './utils/webSocketPlugin';
Vue.use(WebSocketPlugin);

2.页面使用

this.$socket.addEventListener('message', event => {
    console.log('收到消息:');
});

2.单页面使用

if('WebSocket' in window){
    //创建对象
    var ws = new WebSocket('ws://localhost:8080');
}else {
    alert("该浏览器不支持websocket");
}

ws.onopen = function (event){
    consloe.log('建立连接');
}
ws.onclose = function (event){
    consloe.log('连接关闭');
}
ws.onmessage = function (event){
    consloe.log('收到消息:' + event.data);
    //弹窗提醒等
    alert("收到消息");
}
ws.onerror = function (event) {
    alert('WebSocket通信发生错误！');
}
//关闭窗口是关闭连接
window.onbeforeunload = function(){
    ws.close();
}

2.详细介绍

2.readyState

readyState属性返回实例对象的当前状态，共有四种。

• CONNECTING：值为0，表示正在连接。
• OPEN：值为1，表示连接成功，可以通信了。
• CLOSING：值为2，表示连接正在关闭。
• CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

3.onopen

实例对象的onopen属性，用于指定连接成功后的回调函数。

ws.onopen = function () {
  ws.send('Hello Server!');
}

如果要指定多个回调函数，可以使用addEventListener方法。

ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});

4.onclose

实例对象的onclose属性，用于指定连接关闭后的回调函数。

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
};

ws.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
});

5.onmessage

实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。

ws.onmessage = function(event) {
  var data = event.data;
  // 处理数据
};

ws.addEventListener("message", function(event) {
  var data = event.data;
  // 处理数据
});

注意，服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）。

ws.onmessage = function(event){
  if(typeof event.data === String) {
    console.log("Received data string");
  }

  if(event.data instanceof ArrayBuffer){
    var buffer = event.data;
    console.log("Received arraybuffer");
  }
}

除了动态判断收到的数据类型，也可以使用binaryType属性，显式指定收到的二进制数据类型。

// 收到的是 blob 数据
ws.binaryType = "blob";
ws.onmessage = function(e) {
  console.log(e.data.size);
};

// 收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
  console.log(e.data.byteLength);
};

6.send()

实例对象的se·nd()方法用于向服务器发送数据。

发送文本的例子。

ws.send('your message');

发送 Blob 对象的例子。

var file = document
  .querySelector('input[type="file"]')
  .files[0];
ws.send(file);

发送 ArrayBuffer 对象的例子。

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
  binary[i] = img.data[i];
}
ws.send(binary.buffer);

7.bufferedAmount

实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 发送完毕
} else {
  // 发送还没结束
}

8.onerror

实例对象的onerror属性，用于指定报错时的回调函数。

socket.onerror = function(event) {
  // handle error event
};

socket.addEventListener("error", function(event) {
  // handle error event
});

二、服务器端

1.例子1

var ws = require("nodejs-websocket"); //引入websocket模块  

var server = ws.createServer(function(connect) { //创建一个新连接  
    connect.on("text",function(msg){ //接收触发事件    
        if (msg) { //如果消息不是空，将接收到的消息发送给客户端  
            connect.send('服务端已收到消息：' + msg + '服务端发来消息： Hello,' + msg); 
        }  
    });  
}).listen(8088);

2.例子2

var WebSocketServer = require('ws').server;
var wss = new  WebSocketServer({port:9999});
wss.on('connection',function(ws){
    ws.on('message',function (message) {
        ws.send("服务器接收到请求，发送数据给客户端")
    })  
})