原生 javascript 操作 websocket

为什么80%的码农都做不了架构师？>>>   

es6 语法对 WebSocket 的定义

interface WebSocket extends EventTarget {
    binaryType: string;
    readonly bufferedAmount: number;
    readonly extensions: string;
    onclose: (this: WebSocket, ev: CloseEvent) => any;
    onerror: (this: WebSocket, ev: Event) => any;
    onmessage: (this: WebSocket, ev: MessageEvent) => any;
    onopen: (this: WebSocket, ev: Event) => any;
    readonly protocol: string;
    readonly readyState: number;
    readonly url: string;
    close(code?: number, reason?: string): void;
    send(data: any): void;
    readonly CLOSED: number;
    readonly CLOSING: number;
    readonly CONNECTING: number;
    readonly OPEN: number;
    addEventListener<K extends keyof WebSocketEventMap>(type: K, listener: (this: WebSocket, ev: WebSocketEventMap[K]) => any, useCapture?: boolean): void;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}

构造器

WebSocket WebSocket(in DOMString url, in optional DOMString protocols);
WebSocket WebSocket(in DOMString url,in optional DOMString[] protocols);

方法

void close(in optional unsigned long code, in optional DOMString reason);
void send(in DOMString data);

事件

onclose	EventListener	用于监听连接关闭事件监听器。当 WebSocket 对象的readyState 状态变为 CLOSED 时会触发该事件。这个监听器会接收一个叫close的CloseEvent 对象。
onerror	EventListener	当错误发生时用于监听error事件的事件监听器。会接受一个名为“error”的event对象。
onmessage	EventListener	一个用于消息事件的事件监听器，这一事件当有消息到达的时候该事件会触发。这个Listener会被传入一个名为"message"的MessageEvent 对象。
onopen	EventListener	一个用于连接打开事件的事件监听器。当readyState的值变为 OPEN 的时候会触发该事件。该事件表明这个连接已经准备好接受和发送数据。这个监听器会接受一个名为"open"的事件对象。

测试

var url = "ws://" + window.location.host + window.location.pathname + "/ws";
var ws = new WebSocket(url);

ws.onmessage = function (msg) {
  var line =  now() + " " + msg.data + "\n";
  chat.innerText += line;
};

text.onkeydown = function (e) {
  if (e.keyCode === 13 && text.value !== "") {
    ws.send("<" + name + "> " + text.value);
    text.value = "";
  }
};

 

转载于:https://my.oschina.net/lemos/blog/912827