WebSocket 一、编写WebSocket客户端
原文链接：Writing WebSocket client applications
WebSocket client应用程序通过WebSocket协议与WebSocket servers 通讯。
Note: 此功能可应用于 Web Workers。使用 Web Workers链接。
步骤：
1. 创建WebSocket对象。
要使用WebSocket 协议进行通信，需要创建一个 WebSocket 对象；创建WebSocket对象的过程，会自动尝试打开与服务器的连接。
WebSocket 构造函数要求一个必要参数url与一个可选参数protocol:
WebSocket WebSocket(
in DOMString url,
in optional DOMString protocols
);url:
要连接的URL； 也就是用来响应的WebSocket server的URL。
protocols 可选：
一个string值类型的协议名称 或 一个string值类型的数组。这些字符串用于指示子协议，以便单个服务器可以实现多个WebSocket子协议（例如，您可能希望一个服务器能够根据指定的协议处理不同类型的交互）。 如果您不指定协议字符串，则假定为空字符串。
构造函数可能抛出的异常：
SECURITY_ERR
正在尝试连接的端口被阻塞。
连接错误
如果尝试连接时发生错误，首先会将名为“error”的简单事件发送给WebSocket对象（从而调用它的onerror处理程序），然后将CloseEvent发送给WebSocket对象（从而调用它的onclose处理程序） 以指出连接关闭的原因。
从Firefox 11开始，通常会在Mozilla平台的控制台中收到描述性错误消息，并通过CloseEvent收到RFC 6455第7.4节中定义的结束代码。
示例
这个例子创建了一个新的WebSocket，连接到WebSocket 服务器地址是ws://www.example.com/socketserver，协议是一个自定义协议”protocolOne”（可选项）。
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");返回时，exampleSocket.readyState是CONNECTING。 一旦连接准备好传输数据，readyState将变为OPEN。
如果你想打开一个连接并且对你所支持的协议很灵活，你可以指定一个协议数组：
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);一旦建立了连接（即readyState是OPEN），exampleSocket.protocol会告诉你服务器选择了哪个协议。
在上面的例子中，http被ws取代，同样http被wss取代。 建立WebSocket依赖于HTTP Upgrade 机制，所以当我们发送HTTP请求ws：//www.example.com或wss：//www.example.com给服务器，协议会自动升级（不知道翻译的对不对）
下图说明的很清楚(来源)：
步骤是
1，客户端(192.168.1.99:45836)发送请求到 服务器hoyo.idv.tw :80。
2，服务器根据请求的header（Upgrade: websocket），升级http协议为WebSocket并返回。
3，以上WebSocket建立后便于http没有任何关系了。之后使用WebSocket发送、接收消息都是通过socket通信(客户端 与 服务器端的连接端口与协议已改变)，都是在客户端(192.168.1.99:47508)与服务器（ws://hoyo.idv.tw:1030）之间进行。
4，发送、接收消息 前后，都可以再跟进实际应用做判断：是否已认证？没认证不允许发消息？
2. 向服务器发送数据
1，建立连接后，可以通过WebSocket 对象的 send()方法发送数据。
exampleSocket.send("Here's some text that the server is urgently awaiting!");发送的数据可以是字符串，也可以是 Blob, 或者 ArrayBuffer。
Note: Firefox 11版本,只支持发送 字符串 。
2，由于建立连接是异步的并且容易失败，因此不能保证在创建WebSocket对象之后立即调用send（）方法将会成功。 但至少可以确定，可以通过定义onopen处理程序来实现：只在建立连接后，才会尝试发送数据。
exampleSocket.onopen = function (event) {
exampleSocket.send("Here's some text that the server is urgently awaiting!");
};3，使用 JSON 传输对象
可以使用JSON将复杂的数据发送给服务器。 例如，聊天程序可以使用使用JSON-encapsulated(封装)数据包实现的协议与服务器交互：
// Send text to all users through the server
function sendText() {
// Construct a msg object containing the data the server needs to process the message from the chat client.
var msg = {
type: "message",
text: document.getElementById("text").value,
id: clientID,
date: Date.now()
};
// Send the msg object as a JSON-formatted string.
exampleSocket.send(JSON.stringify(msg));
// Blank the text input element, ready to receive the next line of text from the user.
document.getElementById("text").value = "";
}4，接收服务器端的数据
考虑一下聊天客户端应用程序，它使用前面3中提及的JSON传输对象(Using JSON to transmit objects. )。 客户端可能会收到不同类型的数据包，如：
- Login handshake
- Message text
- User list updates
解释代码：
exampleSocket.onmessage = function(event) {
var f = document.getElementById("chatbox").contentDocument;
var text = "";
var msg = JSON.parse(event.data);
var time = new Date(msg.date);
var timeStr = time.toLocaleTimeString();
switch(msg.type) {
case "id":
clientID = msg.id;
setUsername();
break;
case "username":
text = "User " + msg.name + " signed in at " + timeStr + "
";
break;
case "message":
text = "(" + timeStr + ") " + msg.name + ": " + msg.text + "
";
break;
case "rejectusername":
text = "Your username has been set to " + msg.name + " because the name you chose is in use.
"
break;
case "userlist":
var ul = "";
for (i=0; i < msg.users.length; i++) {
ul += msg.users[i] + "
";
}
document.getElementById("userlistbox").innerHTML = ul;
break;
}
if (text.length) {
f.write(text);
document.getElementById("chatbox").contentWindow.scrollByPages(1);
}
};这里我们使用JSON.parse()将JSON对象转换回原始对象，然后检查并处理其内容。
5，文本数据格式
通过WebSocket连接接收的文本采用UTF-8格式。
在Gecko 9.0（Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6）之前，某些有效的但不是字符的UTF-8文本，会导致连接被终止。 现在Gecko已允许这些值。
3.关闭连接
使用完WebSocket 连接，可使用 WebSocket close()方法关闭连接:
exampleSocket.close();exampleSocket.close();
在关闭连接之前，可以使用 bufferedAmount 属性来检查是否有数据尚未在网络上传输数据。
4. 安全 注意事项
不应该在混合内容环境中使用WebSocket；也就是说，不应该从使用HTTPS加载的页面 打开不安全的WebSocket连接，反之亦然。 事实上，一些浏览器明确禁止这个，包括Firefox 8和更高版本。(https=>wss、http==>ws)