HTML5 - Web Socket使用详解（附样例）

作者：hangge | 2017-07-18 08:10

一、Web Socket 标准

1，基本介绍

（1）根据 Web Socket 标准，浏览器能够保持对 Web 服务器打开的连接，从而与服务器长时间进行交换数据。

（2）利用 Web Socket 我们可以开发许多特殊的应用，比如聊天室、大型多人游戏，或者端到端的协作工具。

2，兼容性

（1）桌面浏览器

Chrome：完美支持
Firefox：完美支持
Safari：Safary 7 起支持
IE：IE10 起支持（包括后面的 Edge 也支持）
Opera：完美支持

（2）移动设备

iOS：iOS 6.1 起支持
Android：Andorid 4.4 起支持

3，测试当前浏览器是否支持

由于电脑网络设置的限制、防火墙或者杀毒软件等各种因素的影响。即使是在支持 Web Socket 的浏览器上运行也有可能出现问题。

如果不确定当前电脑是否能使用 Web Socket，可以访问这个网站测试一下：http://websocketstest.com/

访问后网站会尝试连接一个测试服务器，并且生成一个报告告诉你 Web Socket 是否在运行。

二、Web Socket 服务器

1，现成的 Web Socket 服务 url

本文主要演示 HTML5 的 Web Socket 客户端实现，服务端这里就使用现成的第三方服务器，地址如下：

ws://echo.websocket.org

这个服务器功能很简单，就是我们向它发送消息，它会再返回同样的消息。

2，Web Socket 测试页面

它还提供了一个简单的在线测试页面：http://www.websocket.org/echo.html

填上 Web Socket 地址进行连接后，就可以发送和接收数据消息了。

三、实现 Web Socket 客户端

1，实现步骤

（1）首先我们要创建 WebSocket 对象，传入一个 URL。URL 以 ws:// 开头，表示 Web Socket 连接协议。当然该 URL 仍然指向服务器上的一个 Web 应用（比如指向一个 php 脚本）

var socket = new WebSocket("ws://hangge.com/server.php");

注意：Web Socket 标准还支持以 wss:// 开头的 URL，表示安全、加密的连接（类似于请求网页时使用的 https:// 与 http:// 之间的关系）

（2）创建 WebSocket 对象后，页面就会尝试连接服务器。我们可以通过如下 4 个事件来处理消息业务：

onOpen：在建立连接后触发
onError：在出现问题时触发
onMessage：在页面从服务器接收到消息时触发
onClose：连接关闭时触发

（3）连接成功后，我们可以使用 WebSocket 对象的 send() 方法向服务器发送消息。使用 close() 方法关闭连接。

（4）WebSocket 对象还有个 readyState 属性，我们可以通过它的值来判断当前的 socket 状态：

0：连接还没建立
1：打开且准备就绪
2：关闭过程中
3：已关闭

2，效果图

（1）页面打开后会自动连接服务器。

（2）输入框填写内容后点击“发送”按钮，即可将内服发送到服务端。

（3）下方区域会实时显示出发送和接收的消息，以及连接情况。

（4）点击“断开”按钮，即可关闭与服务器的连接。

3，样例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <style>
    </style>
    <script type="text/javascript">
      //用于填写发送消息的输入框
      var messageBox;
      //用于显示消息的div容器
      var messageLog;
      //WebSocket对象
      var socket;

      //页面加载完毕
      window.onload = function() {
        messageBox = document.getElementById('messageBox');
        messageLog = document.getElementById('messageLog');
        connect();
      }

      //创建socket对象并绑定所有事件
      function connect() {
        //创建socket对象
        socket = new WebSocket("ws://echo.websocket.org");

        //监听所有的Web socket事件
        socket.onopen = connectionOpen;
        socket.onmessage = messageReceived;
        socket.onerror = errorOccurred;
        socket.onclose = connectionClosed;
      }

      //断开连接按钮点击
      function disconnect(){
        socket.close();
      }

      //发送消息按钮点击
      function sendMessage(){
        //获取要发送的数据
        var message = messageBox.value;

        //通过socket发送消息
        socket.send(message);

        //告诉用户刚刚发生了什么
        messageLog.innerHTML += "<br>发送：" + message;
      }

      //连接建立完毕事件响应
      function connectionOpen(e) {
        messageLog.innerHTML += "<br>--- Socket连接成功 ---";
      }

      //消息接收事件响应
      function messageReceived(e){
        messageLog.innerHTML += "<br>收到：" + e.data;
      }

      //错误事件响应
      function errorOccurred(e){
        messageLog.innerHTML += "<br>发生错误：" + e.data;
      }

      //连接关闭事件响应
      function connectionClosed(e) {
        messageLog.innerHTML += "<br>--- Socket连接关闭 ---";
      }
    </script>
  </head>
  <body>
    <input id="messageBox" type="text" />
    <button onclick="sendMessage()">发送</button>
    <button onclick="disconnect()">断开</button>
    <div id="messageLog"></div>
  </body>
</html>

HTML5 / CSS3