1. 什么是WebSocket？

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

可以用来替代长轮询（long polling）；long polling 就是客户端不停地向服务器发送请求以获取最新的数据信息，比如说用ajax轮询就是一种方式。

应用场景：一些高实时的应用场景，比如社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、基于位置的应用、在线教育、智能家居等等。

2. WebSocket客户端实现

2.1 创建一个 WebSocket 对象

var Socket = new WebSocket(url, [protocol] );

第一个参数 url, 指定连接的 URL。WebSocket协议的URL使用ws://开头，SSL的WebSocket协议使用wss://开头。

第二个参数 protocol 是可选的，指定了可接受的子协议。

2.2 WebSocket 属性

Socket.readyState

只读属性 readyState 表示连接状态，状态值：

  • 0 – 表示连接尚未建立。
  • 1 – 表示连接已建立，可以进行通信。
  • 2 – 表示连接正在进行关闭。
  • 3 – 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性 bufferedAmount 表示已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

2.3 WebSocket 事件

WebSocket 对象目前一共有四个：onopen, onmessage, onclose 和 onerror。

  • Socket.onopen 连接建立时触发
  • Socket.onmessage 客户端接收服务端数据时触发
  • Socket.onerror 通信发生错误时触发
  • Socket.onclose 连接关闭时触发

2.4 WebSocket 方法

Socket.send() 使用连接发送数据

Socket.close() 关闭连接

2.5. 一个简单的例子

<script type="text/javascript">
    //检查浏览器是否支持WebSocket
    if(window.WebSocket){
        console.log('This browser supports WebSocket');
    }else{
        console.log('This browser does not supports WebSocket');
    }

    // 打开一个 web socket
    var ws = new WebSocket("ws://localhost:1234");

    /**
     * 连接建立时
     */
    ws.onopen = function()
    {
         // 使用 send() 方法发送数据
         ws.send("hello");
    };

    /**
     * 接收服务端数据时
     */
    ws.onmessage = function (evt)
    {
        var received_data = evt.data;
        console.log(received_data);
    };

    /**
     * 连接关闭时
     */
    ws.onclose = function(){
        alert("连接已关闭...");
    };

    /**
     * 通信发生错误时
     */
    ws.onerror = function(){
        // 关闭 websocket
        ws.close();
    };
</script>

3. WebSocket 服务端实现

服务端实现 WebSocket，现在各种语言都很方便了。

比如PHP，我们可以使用Swoole，workerman，ReactPHP等。