[TOC] ## WebSockets WebSockets是一種先進的技術，它能夠在用戶瀏覽器和服務器之間打開交互式通信會話。使用這個API，你能夠給服務器發送消息并接收事件驅動的響應，無需為了回復而輪詢服務器。 ### 接口 #### WebSocket > 連接到WebSocket服務的主要接口，然后在連接發送和接收數據。 #### ColseEvent > 當連接關閉時，由WebSocket對象發送的事件。 #### MessageEvent事件 > 當從服務器接收到消息時，由WebSocket對象發送的事件。 ## Server-sent events（使用服務器發送事件） 在Web應用程序中使用服務器發送事件很簡單。在服務器端,只需要按照一定的格式返回事件流，在客戶端中，只需要為一些事件類型綁定監聽函數，和處理其他普通的事件沒多大區別。 ### 從服務器接受事件 {#從服務器接受事件} 服務器發送事件API也就是[`EventSource`](https://developer.mozilla.org/zh-CN/Server-sent_events/EventSource)接口，在你創建一個新的[`EventSource`](https://developer.mozilla.org/zh-CN/Server-sent_events/EventSource)對象的同時，你可以指定一個接受事件的URI。例如： ``` var evtSource = new EventSource("ssedemo.php"); ``` 一旦你成功初始化了一個事件源,就可以開始監聽它的消息了： ``` evtSource.onmessage = function(e) { var newElement = document.createElement("li"); newElement.innerHTML = "message: " + e.data; eventList.appendChild(newElement); } ``` 上面的代碼監聽了那些從服務器發送來的所有沒有指定事件類型的消息\(沒有`event字段的消息`\),然后把消息內容顯示在頁面文檔中. 你也可以使用`addEventListener()`方法來監聽其他類型的事件: ``` evtSource.addEventListener("ping", function(e) { var newElement = document.createElement("li"); var obj = JSON.parse(e.data); newElement.innerHTML = "ping at " + obj.time; eventList.appendChild(newElement); }, false); ``` 這段代碼也類似,只是只有在服務器發送的消息中包含一個值為"ping"的`event`字段的時候才會觸發對應的處理函數,也就是將 data字段的字段值解析為JSON數據,然后在頁面上顯示出所需要的內容。 ### 服務器端如何發送事件流 {#服務器端如何發送事件流} 服務器端發送的響應內容應該使用值為"text/event-stream"的MIME類型.這里有一個事件流文件的例子:[Event stream format](https://developer.mozilla.org/zh-CN/docs/Server-sent_events/Using_server-sent_events#Event_stream_format). 演示的PHP代碼如下: ``` date_default_timezone_set("America/New_York"); header("Content-Type: text/event-stream\n\n"); $counter = rand(1, 10); while (1) { // Every second, sent a "ping" event. echo "event: ping\n"; $curDate = date(DATE_ISO8601); echo 'data: {"time": "' . $curDate . '"}'; echo "\n\n"; // Send a simple message at random intervals. $counter--; if (!$counter) { echo 'data: This is a message at time ' . $curDate . "\n\n"; $counter = rand(1, 10); } ob_flush(); flush(); sleep(1); } ``` 上面的代碼會讓服務器每隔一秒生成一個事件流并返回,其中每條消息的事件類型為"ping",數據字段都使用了JSON格式,數組字段中包含了每個事件流生成時的時間字符串.而且會隨機返回一些無事件類型的消息. ### 事件流格式 {#事件流格式} 事件流僅僅是一個簡單的文本數據流,文本應該使用UTF- 8格式的編碼.每條消息后面都由一個空行作為分隔符.以冒號開頭的行為注釋行,會被忽略. 每條消息是由多個字段組成的,每個字段由字段名,一個冒號,以及字段值組成. #### 字段 {#字段} 規范中規定了下面這些字段: `event` 事件類型.如果指定了該字段,則在客戶端接收到該條消息時,會在當前的`EventSource`對象上觸發一個事件,事件類型就是該字段的字段值,你可以使用`addEventListener()`方法在當前EventSource對象上監聽任意類型的命名事件,如果該條消息沒有`event`字段,則會觸發 onmessage屬性上的事件處理函數。 `data` 消息的數據字段.如果該條消息包含多個`data`字段,則客戶端會用換行符把它們連接成一個字符串來作為字段值. `id` 事件ID,會成為當前`EventSource`對象的內部屬性"最后一個事件ID"的屬性值. `retry` 一個整數值,指定了重新連接的時間\(單位為毫秒\),如果該字段值不是整數,則會被忽略. 除了上面規定的字段名,其他所有的字段名都會被忽略. **未命名事件** 下面的例子中發送了三條消息,第一條僅僅是個注釋,因為它以冒號開頭.第二條消息只包含了一個`data`字段,值為"some text".第三條消息包含的兩個`data`字段會被解析成為一個字段,值為"another message\nwith two lines".其中每兩條消息之間是以一個空行為分割符的. ``` : this is a test stream data: some text data: another message data: with two lines ``` **命名事件** 下面的事件流中包含了一些命名事件.每個事件的類型都是由`event字段指定的`,另外每個`data`字段的值可以使用JSON格式,當然也可以不是. ``` event: userconnect data: {"username": "bobby", "time": "02:33:48"} event: usermessage data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."} event: userdisconnect data: {"username": "bobby", "time": "02:34:23"} event: usermessage data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."} ``` ## WebRTC WebRTC中的RTC是實時通信的簡稱，這是一種支持在瀏覽器客戶端之間語音/視頻交流和數據分享的技術。WebRTC作為一項標準,使得所有瀏覽器無需安裝插件或第三方軟件，就可以點對點地分享應用數據和進行電話會議。 WebRTC組件是通過JavaScript APIs獲得的。目前正在開發中的APIs包括：網絡流API\(能夠提供音頻和視頻\)，點對點連接API\(允許兩個或更多用戶通過瀏覽器進行聯系\)。同樣在開發中的還有數據API，能夠讓瀏覽器在實時游戲，文字聊天，文件傳輸和其他應用中與其他類型數據進行交流。