前端js+WebSocket实现实时通信

websocket 服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话。

websocket API

名称	类型	备注
WebSocket	对象	提供到远程主机的双向通道
send	方法	发送数据到服务器
close	方法	关闭 websocket
onopen	属性	当建立websocket连接时触发，只触发一次
onmessage	属性	当服务端发送数据时触发，可多次触发
onerror	属性	当连接出现错误时触发-因为当触发了onerror之后连接就会触发关闭事件
onclose	属性	当websocket连接关闭时触发，只触发一次
readyState	属性	获取 websocket 连接的状态
url	属性	websocket 链接的服务器地址

使用实例

浏览器使用时先判断当前浏览器是否支持websocket

if (!window.WebSocket) {
     alert('当前浏览器不支持WebSocket');
     return;
}

建立websocket链接 

var ws = new WebSocket('ws://url');
// 获取连接状态
console.log('ws连接状态：' + ws.readyState);

//监听是否连接成功
ws.onopen = function () {
    console.log('ws连接状态：' + ws.readyState);

    var obj = {name:'zhangsan', age:18}
    // 连接成功发送一个数据到服务端
    // 复杂的数据结构要先进行序列化
    ws.send(JSON.stringify(obj));  
}

// 接听服务器发回的信息并处理展示
ws.onmessage = function (e) {
    console.log('接收到来自服务器的消息：');
    console.log(JSON.parse(e.data));
}

// 监听连接关闭事件，当客户端收到服务端发送的关闭连接请求时，触发onclose事件
ws.onclose = function () {
    // 监听整个过程中websocket的状态
    console.log('ws连接状态：' + ws.readyState);
}

// 监听并处理error事件，如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
ws.onerror = function (error) {
    console.log(error);
    ws.close();  // 主动断开连接
}

补充：

1、url之前需添加ws://（未加密）或wss://（已加密），类似http://、https://