HTML5 WebSockets API简介

HTML5引入了许多新的有趣的API，包括WebSockets。 WebSockets允许开发人员通过在浏览器和服务器之间建立套接字连接来创建功能强大的实时应用程序。 换句话说，由于持久的连接，客户端和服务器都可以随时交换数据。 本教程说明了如何使用WebSockets创建实时Web应用程序。

问题

在实时应用程序中，服务器和客户端之间的连接必须是持久的。 因此，为了创建服务器启动的传输的幻觉，通常使用长轮询。 WebSocket通过在客户端和服务器之间建立持久的套接字连接来解决此问题。 建立连接后，它将保持打开状态，直到客户端或服务器要关闭它为止。 它大大减轻了服务器的负担，最适合于低延迟的应用程序。

入门

打开WebSocket连接非常简单。 您只需要调用WebSocket()构造函数即可创建连接。

var connection=new WebSocket("ws://localhost:8787",['soap','json']);

ws:和wss:分别是普通WebSocket连接和安全WebSocket连接的URL架构。 第二个参数用于定义子协议名称，该名称可以是字符串数组或字符串。 但是，服务器将仅接受一个子协议。 在连接的生存期内，浏览器将收到一些事件，例如打开连接，收到消息和关闭连接。 要处理这些事件，请使用以下代码：

var connection=new WebSocket("ws://localhost:8787",'json');
connection.onopen = function () {
  connection.send('Hello, Server!!'); //send a message to server once connection is opened.
};
connection.onerror = function (error) {
  console.log('Error Logged: ' + error); //log errors
};
connection.onmessage = function (e) {
  console.log('Received From Server: ' + e.data); //log the received message
};

一旦打开连接，浏览器就会使用connection.send()将消息发送到服务器。 如果遇到错误，则上面的代码将其记录下来。 如果服务器在任何时间向浏览器发送消息，则触发onmessage回调。 事件处理程序获取一个事件对象，该对象的data属性包含接收到的消息。

connection.send()方法也可以用于发送二进制数据。 为此，可以使用Blob或ArrayBuffer 。 以下代码演示了如何使用ArrayBuffer将在画布上绘制的图像发送到服务器。

var image = canvas2DContext.getImageData(0, 0, 440, 300);
var binary_data = new Uint8Array(image.data.length);
for (var i = 0; i < image.data.length; i++) {
  binary_data[i] = image.data[i];
}
connection.send(binary_data.buffer);

同样，接收到的消息可以是字符串或二进制数据。 二进制数据可以作为blob或arraybuffer 。

简单的WebSocket应用程序

为了创建有效的应用程序，您还需要服务器端实现。 可以使用诸如node.js，Java，.NET，Ruby或C ++之类的技术来创建服务器端实现。 本节将向您展示如何使用WebSockets创建一个简单的应用程序。

该示例应用程序将允许用户向服务器提出特定问题。 服务器端实现是使用Windows 7上的Java jWebSocket框架完成的。因此，要设置环境，请遵循以下简单步骤。 我假设您已经在Windows 7 PC上安装了最新的JDK（JDK 7）。

步骤1

转到jWebSocket Downloads并下载标记为服务器的第一个zip。

第2步

解压缩存档，并将其放置在C：中的某个位置。 然后，创建一个名为JWEBSOCKET_HOME的新环境变量，该变量引用jWebSocket安装的根目录。 这是jWebSocket-1.0文件夹的路径。 将以下JAR添加到您的类路径中：

• JWEBSOCKET_HOME / libs / jWebSocketServer-1.0.jar
• JWEBSOCKET_HOME / libs / jWebSocketServerAPI-1.0.jar
• JWEBSOCKET_HOME / libs / jWebSocketCommon-1.0.jar

第三步

创建一个新的Java Source文件并将其命名为SocketListener.java 。 将以下代码添加到该文件。

import java.util.Date;
import java.text.SimpleDateFormat;
import org.jwebsocket.factory.JWebSocketFactory;
import org.jwebsocket.server.TokenServer;
import org.jwebsocket.kit.WebSocketServerEvent;
import org.jwebsocket.api.WebSocketServerListener;
import org.jwebsocket.api.WebSocketPacket;
import org.jwebsocket.config.JWebSocketConfig;
import org.jwebsocket.instance.JWebSocketInstance;
class JWebSocketListener implements WebSocketServerListener {
  public void processOpened(WebSocketServerEvent event) {
    System.out.println("Connection Opened");
  }
  public void processPacket(WebSocketServerEvent event, WebSocketPacket packet) {
    switch(packet.getString()){
      case "1":
        packet.setString("My Name is jWebSocketServer");
        break;
      case "2":
        packet.setString("Windows 7 64 Bit");
        break;
      case "3":
        SimpleDateFormat sdf=new SimpleDateFormat("hh:mm:ss");
        packet.setString(sdf.format(new Date()));
        break;
    }
    event.sendPacket(packet);
  }
  public void processClosed(WebSocketServerEvent event) {
  }
}
public class SocketListener{
  public static void main(String[] args){
    JWebSocketFactory.printCopyrightToConsole();
    JWebSocketConfig.initForConsoleApp(new String[]{});
    JWebSocketFactory.start();
    TokenServer server = (TokenServer)JWebSocketFactory.getServer("ts0");
    if(server!=null) {
      server.addListener(new JWebSocketListener());
    }
    while (JWebSocketInstance.getStatus() != JWebSocketInstance.SHUTTING_DOWN){
      try {
        Thread.sleep(250);
      }
      catch (InterruptedException e) {
      }
    }
  }
}

说明

该代码实现了WebSocketServerListener接口。 该接口声明了以下三个方法，应在我们的类JWebSocketListener 。

• processOpened()
• processPacket()
• processClosed()

打开连接后，将调用processOpened() 。 一个示例用法是启动一个线程，该线程定期将更新发送给客户端。 同样，连接关闭时将调用processClosed()以便您可以执行任何清理。

在我们的应用程序中，主要处理过程在processPacket() 。 每当浏览器向服务器发送消息时，都会调用此方法。 它接收两个对象，类型为WebSocketServerEvent和WebSocketPacket 。 首先，我们使用WebSocketPacket#getString()读取消息（这是客户端提出的问题）。 服务器根据问题发送答案。 使用WebSocketPacket#setString()将要发送的消息包装在WebSocketPacket 。 然后，我们调用WebSocketServerEvent#sendPacket() ，将数据包作为参数传递。 接下来，我们创建一个名为SocketListener的公共类。 此类启动WebSocket实现服务器并向其注册我们的自定义侦听器。

第四步

编译SocketListener.java并使用命令java SocketListener启动服务器。

第5步

现在，您已经完成了服务器端的实现，是时候创建将与服务器交互的客户端了。 以下是我们的初始HTML标记：

<html>
  <head>
    <title>WebSocket Test</title>
    <style>
      #response{
        width: 200px;
        background: #F2F2F2;
        padding: 120px 0px 120px 0px;
        font-size:18px;
      }
    </style>
  </head>
  <body>
    <div align="center">
      Choose a question to ask:
      <select id="question" name="question" onchange="sendMessage(this.value);">
        <option value="1">What's Your Name</option>
        <option value="2">Which OS You Are Running On?</option>
        <option value="3">What Time Is It?</option>
      </select>
      <br/><br/>
      <div id="response">
        My Name is jWebSocketServer
      </div>
    </div>
  </body>
</html>

现在，将以下JavaScript添加到HTML：

<script type="text/javascript">
var connection = new WebSocket('ws://localhost:8787', 'json');
connection.onopen = function () {
  console.log('Connection Opened');
};
connection.onerror = function (error) {
  console.log('WebSocket Error ' + error);
};
connection.onmessage = function (e) {
  if(e.data.indexOf("subProtocol")==-1)
    document.getElementById("response").innerHTML=e.data+"<br/>";
};
function sendMessage(msg){
  connection.send(msg);
}
</script>

说明

我们创建了一个HTML文件，允许用户从下拉菜单中选择问题。 当发生onchange事件时，我们获取所选项目的值，并将该值发送到服务器。 然后，服务器处理该请求，并将答案发送回浏览器。 收到来自服务器的消息后，将执行onmessage回调，该回调在response <div>显示响应。 if(e.data.indexOf("subProtocol")==-1)不是必需的。 之所以包含它，是因为最初在打开连接时，服务器会将包含信息的长字符串发送到浏览器。 由于我们不想显示此字符串，因此包含了以上条件。

注意：请勿直接打开此HTML文件。 将其放在localhost服务器中，然后在浏览器中访问它。

结论

使用WebSocket API，您可以创建功能非常强大的实时应用程序。 但是，请记住，WebSockets允许跨源通信。 因此，您应该只与您信任的服务器和客户端通信。 以下是您可以使用此API创建的一些示例应用程序：

• 实时社交流更新
• HTML5多人游戏
• 在线聊天应用

查看Mozilla开发人员网络以了解有关WebSockets API的更多信息。

From: https://www.sitepoint.com/introduction-to-the-html5-websockets-api/