实现背景
长久以来,创建实现客户端和用户端之间双工通讯的web app都会造成HTTP轮询的滥用: 客户端向主机不断发送不同的HTTP呼叫来进行询问。
这会导致一系列的问题:1.服务器被迫为每个客户端使用 许多不同的底层TCP连接 :一个用于向客户端发送信息,其它用于接收每个传入消息。2.有线协议有很高的开销,每一个客户端和服务器之间都有HTTP头。3.客户端脚本被迫维护从传出连接到传入连接的映射来追踪回复 。
var Socket = new WebSocket(url, [protocol] );
第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。
WebSocket 属性
以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象:
属性 | 描述 |
---|---|
Socket.readyState | 只读属性 readyState 表示连接状态,可以是以下值:
|
Socket.bufferedAmount | 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。 |
WebSocket 事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象:
事件 | 事件处理程序 | 描述 |
---|---|---|
open | Socket.onopen | 连接建立时触发 |
message | Socket.onmessage | 客户端接收服务端数据时触发 |
error | Socket.onerror | 通信发生错误时触发 |
close | Socket.onclose | 连接关闭时触发 |
WebSocket 方法
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象:
方法 | 描述 |
---|---|
Socket.send() | 使用连接发送数据 |
Socket.close() | 关闭连接 |
websocket的应用场景:
一、概述
HTML5 WebSockets是HTML5中最强大的通信功能,它定义了一个全双工通信信道,仅通过Web上的一个Socket即可进行通信。
目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,Comet、轮询、长轮询、流(streaming)解决方案,所有这些提供实时数据的方式包含有大量额外的、不必要的报头数据,会造成传输延迟。最重要的是为了在半双工HTTP的基础上模拟全双工通信,目前的许多解决方案都是使用了两个连接:一个用于下行数据流,另一个用于上行数据流。这两个连接的保持和协作也会造成大量的资源消耗,并增加了复杂度。
WebSockets就是解决以上问题的方案。为了建立WebSocket通信,客户端和服务器在初始握手时,将HTTP协议升级到WebSocket协议。
现在WebSocket服务器有很多,还在开发中的更多。有一下几种:
- Kaazing WebSocket Gateway:一种基于Java的WebSocket网关。
- mod_pywebsocket:一种基于Python的Apache HTTP服务器扩展。
- Netty:一种包含WebSocket的Java框架。
- node.js:一种驱动多个WebSocket服务器的服务器端JavaScript框架。
二、HTML5 WebSockets API
1、浏览器支持情况检测
- function loadDemo() {
- if (window.WebSocket) {
- //supported
- } else {
- // not supported
- }
- }
2、WebSocket对象的创建和服务器连接
要连接通信端点,只需要创建一个新的WebSocket实例,并提供希望连接的对端URL。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。
- url = "ws://localhost:8080/echo";
- w = new WebSocket(url);
建立WebSocket连接时,可以列出Web应用能够使用的协议。WebSocket构造函数的第二个参数既可以是字符串,也可以是字符串组。
- w = new WebSocket(url, ["proto1", "proto2"]);
假设proto1和proto2是定义明确、可能已注册且标准化的协议名称,它们能够同时为客户端和服务器端所理解。服务器会从列表中选择首选协议。
- onopen = function(e) {
- //确定服务器选择的协议
- log(e.target.protocol);
- }
3、添加事件监听器
WebSocket编程遵循异步编程模型;打开socket后,只需等待事件发生,而不需要主动向服务器轮询,所以需要在WebSocket对象中添加回调函数来监听事件。
WebSocket对象有三个事件:open、close和message。
- w.onopen = function() {
- log("open");
- w.send("send message");
- }
- w.onmessage = function(e) {
- log(e.data);
- }
- w.onclose = function(e) {
- log("closed");
- }
- w.onerror = function(e) {
- log("error");
- }
4、发送消息
当socket处于打开状态(即onopen之后,onclose之前),可以用send方法来发送消息。消息发送完,可以调用close方法来终止连接,也可以不这么做,让其保持打开状态。
- w.send();
你可能想测算在调用Send()函数之前,有多少数据备份在发送缓冲区中。bufferAmount属性表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。
- document.getElementById("sendButton").onclick = function() {
- if (w.bufferedAmount < bufferThreshold) {
- w.send(document.getElementById("inputMessage").value);
- }
- }
WebSocket API支持以二进制数据的形式发送Blob和ArrayBuffer实例
- var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]);
- w.send(a.buffer);
三、例子
书中介绍了一个用Python写的Echo服务,书中的代码可以在http://www.apress.com/9781430238645 的“Source Code/Downloads”中下载下载。
对于JAVA开发人员Tomcat是最熟悉的,在Tomcat8中已经实现了WebSocket API 1.0。Tomcat7也会在不久实现(现在的实现不是WebSocket API 1.0)。
在这里写一下在Tomcat8下执行的例子。
例子由客户端页面和WebSocket服务程序组成,功能在Echo基础上增加一个服务端定时发送信息的功能。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Test WebSocket</title>
- <script type="text/javascript">
- //显示信息
- var log = function(s) {
- if (document.readyState !== "complete") {
- log.buffer.push(s);
- } else {
- document.getElementById("output").textContent += (s + "\n");
- document.getElementById("outputdiv").scrollTop = document.getElementById("outputdiv").scrollHeight;
- }
- }
- log.buffer = [];
- //显示连接状态
- function setConnected(status) {
- document.getElementById("socketstatus").innerHTML = status;
- }
- var ws = null;
- //连接
- function connect() {
- if (ws != null) {
- log("现已连接");
- return ;
- }
- url = "ws://localhost:8080/websocket/mywebsocket";
- if ('WebSocket' in window) {
- ws = new WebSocket(url);
- } else if ('MozWebSocket' in window) {
- ws = new MozWebSocket(url);
- } else {
- alert("您的浏览器不支持WebSocket。");
- return ;
- }
- ws.onopen = function() {
- log("open");
- setConnected("已连接");
- //设置发信息送类型为:ArrayBuffer
- ws.binaryType = "arraybuffer";
- //发送一个字符串和一个二进制信息
- ws.send("thank you for accepting this WebSocket request");
- var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]);
- ws.send(a.buffer);
- }
- ws.onmessage = function(e) {
- log(e.data.toString());
- }
- ws.onclose = function(e) {
- log("closed");
- }
- ws.onerror = function(e) {
- log("error");
- }
- }
- //断开连接
- function disconnect() {
- if (ws != null) {
- ws.close();
- ws = null;
- setConnected("已断开");
- }
- }
- window.onload = function() {
- connect();
- log(log.buffer.join("\n"));
- //发送页面上输入框的信息
- document.getElementById("sendButton").onclick = function() {
- if (ws != null) {
- ws.send(document.getElementById("inputMessage").value);
- }
- }
- //停止心跳信息
- document.getElementById("stopButton").onclick = function() {
- if (ws != null) {
- var a = new Uint8Array([1, 9, 2, 0, 1, 5, 1, 6]);
- ws.send(a.buffer);
- }
- }
- }
- </script>
- </head>
- <body οnunlοad="disconnect();">
- <div>连接状态:<span id="socketstatus"></span></div>
- <div>
- <input type="text" id="inputMessage" value="Hello, WebSocket!">
- <button id="sendButton">发送</button><button id="stopButton" style="margin-left:15px">停止心跳信息</button>
- </div>
- <div>
- <button id="connect" οnclick="connect();">连接</button>
- <button id="disconnect" οnclick="disconnect();">断开</button>
- </div>
- <div style="height:300px; overflow:auto;" id="outputdiv">
- <pre id="output"></pre>
- </div>
- </body>
- </html>
服务端程序用注解方式驱动
- package com.test.wsocket;
- import java.io.IOException;
- import java.nio.ByteBuffer;
- import java.util.Random;
- import java.util.Timer;
- import java.util.TimerTask;
- import javax.websocket.OnClose;
- import javax.websocket.OnMessage;
- import javax.websocket.OnOpen;
- import javax.websocket.PongMessage;
- import javax.websocket.Session;
- import javax.websocket.server.ServerEndpoint;
- @ServerEndpoint("/mywebsocket")
- public class MyWebSocket {
- private Session session;
- private static final Random random = new Random();
- private Timer timer = null;
- //停止信息信息指令
- private static final ByteBuffer stopbuffer = ByteBuffer.wrap(new byte[]{1, 9, 2, 0, 1, 5, 1, 6});
- /**
- * 打开连接时执行
- * @param session
- */
- @OnOpen
- public void start(Session session) {
- this.session = session;
- try {
- System.out.println("open");
- if (session.isOpen()) {
- //设置心跳发送信息。每2秒发送一次信息。
- timer = new Timer(true);
- timer.schedule(task, 1000, 2000);
- }
- } catch (Exception e) {
- try {
- session.close();
- } catch (IOException e1) {}
- }
- }
- /**
- * 接收信息时执行
- * @param session
- * @param msg 字符串信息
- * @param last
- */
- @OnMessage
- public void echoTextMessage(Session session, String msg, boolean last) {
- try {
- if (session.isOpen()) {
- System.out.println("string:" + msg);
- session.getBasicRemote().sendText(msg, last);
- }
- } catch (IOException e) {
- try {
- session.close();
- } catch (IOException e1) {
- // Ignore
- }
- }
- }
- /**
- * 接收信息时执行
- * @param session
- * @param bb 二进制数组
- * @param last
- */
- @OnMessage
- public void echoBinaryMessage(Session session, ByteBuffer bb, boolean last) {
- try {
- if (session.isOpen()) {
- //如果是停止心跳指令,则停止心跳信息
- if (bb.compareTo(stopbuffer) == 0) {
- if (timer != null) {
- timer.cancel();
- }
- } else {
- session.getBasicRemote().sendBinary(bb, last);
- }
- }
- } catch (IOException e) {
- try {
- session.close();
- } catch (IOException e1) {
- // Ignore
- }
- }
- }
- /**
- * 接收pong指令时执行。
- *
- * @param pm Ignored.
- */
- @OnMessage
- public void echoPongMessage(PongMessage pm) {
- // 无处理
- }
- @OnClose
- public void end(Session session) {
- try {
- System.out.println("close");
- if (timer != null) {
- timer.cancel();
- }
- } catch(Exception e) {
- }
- }
- /*
- * 发送心跳信息
- */
- public void sendLong(long param) {
- try {
- if (session.isOpen()) {
- this.session.getBasicRemote().sendText(String.valueOf(param));
- }
- } catch (IOException e) {
- try {
- this.session.close();
- } catch (IOException e1) {}
- }
- }
- /**
- * 心跳任务。发送随机数。
- */
- TimerTask task = new TimerTask() {
- public void run() {
- long param = random.nextInt(100);
- sendLong(param);
- }
- };
- }
- <?xml version="1.0" encoding="UTF-8"?>
- <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
- <display-name>websocket</display-name>
- <welcome-file-list>
- <welcome-file>index.html</welcome-file>
- </welcome-file-list>
- <filter>
- <filter-name>Set Character Encoding</filter-name>
- <filter-class>org.apache.catalina.filters.SetCharacterEncodingFilter</filter-class>
- <init-param>
- <param-name>encoding</param-name>
- <param-value>UTF-8</param-value>
- </init-param>
- <init-param>
- <param-name>ignore</param-name>
- <param-value>true</param-value>
- </init-param>
- </filter>
- <filter-mapping>
- <filter-name>Set Character Encoding</filter-name>
- <url-pattern>/*</url-pattern>
- </filter-mapping>
- </web-app>
将以上程序部署到Tomcat8下,启动服务。
碍于原作者的代码繁琐,我自己在尝试的过程中也写了一个:
<body>
<p>详见http://toplchx.iteye.com/blog/1929427</p>
<button>关闭连接</button>
<button>打开连接</button>
<script>
if(window.WebSocket) {
console.log("support websockets");
} else {
console.log("not support websockets");
}
// var sockets=new WebSocket("ws://mx.360island.com");
var sockets = new WebSocket("ws://echo.websocket.org", ["com.kaazing.echo",
"example.imaginary.protocol"
]);
//setinterval变量
var timeCount;
//建立时便触发
sockets.onopen = function(e) {
if(sockets.readyState == 1) {
console.log("open");
//连接成功时, 使用连接发送数据
timeCount = setInterval(sendMessage, 2000);
}
}
// 客户端接受服务器数据时触发
sockets.onmessage = function(e) {
//接受数据
console.log("实时接受数据" + e.data);
}
// 通信发生错误时触发
sockets.onError = function() {
console.log("error");
}
//发送数据的变量
var send_num = 0;
//发送数据函数
function sendMessage() {
console.log("发送数据" + send_num);
sockets.send(send_num);
send_num++;
}
var closeWebSockets = document.getElementsByTagName("button")[0];
//点击按钮关闭连接
closeWebSockets.onclick = function() {
if(sockets.readyState == 1) {
sockets.close();
clearInterval(timeCount);
console.log("已经关闭连接,当前链接的状态是:"+sockets.readyState);
} else {
console.log("尚未建立连接");
}
}
var openWebSockets = document.getElementsByTagName("button")[1];
//点击按钮关闭连接
openWebSockets.onclick = function() {
// 只有在尚未建立连接的情况下才可以再建立连接
if(sockets.readyState == 2) {
sockets = new WebSocket("ws://echo.websocket.org", ["com.kaazing.echo",
"example.imaginary.protocol"
]);
sockets.onopen = function(e) {
if(sockets.readyState == 2) {
console.log("open");
//连接成功时, 使用连接发送数据
timeCount = setInterval(sendMessage, 2000);
}
}
} else {
console.log("已经有一个同名的链接处于打开状态");
}
}
</script>
</body>
webWorker
web worker 是运行在后台的 JavaScript,不会影响页面的性能。
什么是 Web Worker?
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
浏览器支持
所有主流浏览器均支持 web worker,除了 Internet Explorer
使用web worker需要以下几步:
检测 Web Worker 支持
在创建 web worker 之前,请检测用户的浏览器是否支持它:
if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... } else { // Sorry! No Web Worker support.. }
创建 web worker 文件
现在,让我们在一个外部 JavaScript 中创建我们的 web worker。
在这里,我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中:
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。
注释:web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务。
创建 Web Worker 对象
我们已经有了 web worker 文件,现在我们需要从 HTML 页面调用它。
下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码:
if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }
然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 "onmessage" 事件监听器:
w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; };
当 web worker 传递消息时,会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
终止 Web Worker
当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。
如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:
w.terminate();