1.使用協議
由於 Web Sockets 使用了自定義的協議，所以 URL 模式也略有不同。未加密的連接不再是 http://，而是 ws://；加密的連接也不是 https://，而是 wss://。
2.使用自定義協議的優缺點
優點：能夠在客戶端和服務器之間發送非常少量的數據，而不必擔心 HTTP 那樣字節級的開銷。由於傳遞的數據包很小，因此 Web Sockets 非常適合移動應用。
缺點：制定協議的時間比制定JavaScript API 的時間還要長。
3.Web Sockets API
(1)要創建 Web Socket，先實例一個 WebSocket 對象並傳入要連接的 URL：
var socket = new WebSocket("ws://www.example.com/server.php");
同源策略對 Web Sockets 不適用，因此可以通過它打開到任何站點的連接。至於是否會與某個域中的頁面通信，則完全取決於服務器。（通過握手信息就可以知道請求來自何方）
實例化了 WebSocket 對象後，瀏覽器就會馬上嘗試創建連接。
WebSocket.OPENING (0)：正在建立連接。
WebSocket.OPEN (1)：已經建立連接。
WebSocket.CLOSING (2)：正在關閉連接。
WebSocket.CLOSE (3)：已經關閉連接。
WebSocket 沒有 readystatechange 事件，readyState的值永遠從 0 開始。
要關閉 Web Socket 連接，可以在任何時候調用 close()方法。
socket.close(); //調用了 close()之後，readyState 的值立即變爲 2（正在關閉），而在關閉連接後就會變成 3。
(2). 發送數據
Web Socket 打開之後，就可以通過連接發送和接收數據。要向服務器發送數據，使用 send()方法並傳入任意字符串，例如：
var socket = new WebSocket("ws://www.example.com/server.php");
socket.send("Hello world!");
因爲 Web Sockets 只能通過連接發送純文本數據，所以對於複雜的數據結構，在通過連接發送之前，必須進行序列化。然後再發送到服務器：
var message = {
time: new Date(),
text: "Hello world!",
clientId: "asdfp8734rew"
};
socket.send(JSON.stringify(message));
(3)接收數據
服務器要讀取其中的數據，就要解析接收到的 JSON 字符串。
當服務器向客戶端發來消息時，WebSocket 對象就會觸發 message 事件。這個 message 事件與其他傳遞消息的協議類似，也是把返回的數據保存在 event.data 屬性中。
socket.onmessage = function(event){
var data = event.data;
//處理數據
};
與通過 send()發送到服務器的數據一樣，event.data 中返回的數據也是字符串。
(4) 其他事件
WebSocket 對象還有其他三個事件，在連接生命週期的不同階段觸發。
open：在成功建立連接時觸發。
error：在發生錯誤時觸發，連接不能持續。
close：在連接關閉時觸發。
WebSocket 對象不支持 DOM 2 級事件偵聽器，因此必須使用 DOM 0 級語法分別定義每個事件處理程序。
var socket = new WebSocket("ws://www.example.com/server.php");
socket.onopen = function(){
alert("Connection established.");
};
socket.onerror = function(){
alert("Connection error.");
};
socket.onclose = function(){
alert("Connection closed.");
};
在這三個事件中，只有 close 事件的 event 對象有額外的信息。這個事件的事件對象有三個額外的屬性：
wasClean :是一個布爾值，表示連接是否已經明確地關閉；
code :是服務器返回的數值狀態碼；
reason: 是一個字符串，包含服務器發回的消息。
socket.onclose = function(event){
console.log("Was clean? " + event.wasClean + " Code=" + event.code + " Reason="
+ event.reason);
};
4.實際的運用
小程序的即時通訊項目實例：https://blog.csdn.net/qq_42833001/article/details/88568339
雲信聊天室（小程序的聊天室）：https://dev.yunxin.163.com/docs/product/IM即時通訊/SDK開發集成/Web開發集成/聊天室