1、什麼是WebSocket？

WebSocket 是一種自然的全雙工、雙向、單套接字連接。使用WebSocket，你的HTTP 請(qǐng)求變成開啟WebSocket 連線（WebSocket 或WebSocket over TLS（TransportLayer Security，傳輸層安全性，原稱「SSL」））的單一請(qǐng)求，並且重複使用從客戶端到伺服器以及伺服器到客戶端的同一連接。 WebSocket 減少了延遲，因?yàn)橐坏┙⑵餡ebSocket 連接，伺服器可以在訊息可用時(shí)發(fā)送它們。例如，和輪詢不同，WebSocket只發(fā)出一個(gè)請(qǐng)求。伺服器不需要等待來自客戶端的請(qǐng)求。相似地，客戶端可以在任何時(shí)候向伺服器發(fā)送訊息。相較於輪詢不管是否有可用訊息，每隔一段時(shí)間都發(fā)送一個(gè)請(qǐng)求，單一請(qǐng)求大大減少了延遲。

2、WebSocket API

WebSocket API 讓你可以透過Web，在客戶端應(yīng)用程式和伺服器端進(jìn)程之間建立全雙工的雙向通訊。 WebSocket 介面規(guī)定了可用於客戶端的方法以及客戶端與網(wǎng)路的互動(dòng)方式。?

3、WebSocket建構(gòu)子

為了建立到伺服器的WebSocket連接，使用WebSocket接口，透過指向一個(gè)代表所要連接端點(diǎn)的URL，實(shí)例化一個(gè)WebSocket物件。 WebSocket 協(xié)定定義了兩種URL方案（URL scheme）—ws和wss，分別用於客戶端和伺服器之間的非加密與加密流量。

實(shí)例：var ws = new WebSocket("ws://www.websocket.org");

4、WebSocket事件

WebSocket API 是純事件驅(qū)動(dòng)的。應(yīng)用程式程式碼監(jiān)聽WebSocket物件上的事件，以便處理輸入資料和連線狀態(tài)的改變。 WebSocket協(xié)定也是事件驅(qū)動(dòng)的。

WebSocket物件調(diào)度4個(gè)不同的事件：

A、open事件：

一旦伺服器回應(yīng)了WebSocket連線請(qǐng)求，open事件觸發(fā)並建立一個(gè)連線。 open事件對(duì)應(yīng)的回呼函數(shù)稱為onopen

實(shí)例：

ws.onopen = function(e) {
console.log("Connection open...");
};

? ?

B、messagess事件：?

message事件在接收到訊息時(shí)觸發(fā)事件對(duì)應(yīng)於訊息的回調(diào)。?

實(shí)例：

ws.onmessage = function(e) {
if(typeof e.data === "string"){
console.log("String message received", e, e.data);
} else {
console.log("Other message received", e, e.data);
}
};

? ?

C、error事件：

error 事件在響應(yīng)意外故障的時(shí)候觸發(fā)。與該事件對(duì)應(yīng)的回呼函數(shù)為onerror。?
實(shí)例：

ws.onerror = function(e){
console.log('websocked error');
handerError();
}

? ?

D、close事件：

close 事件在WebSocket 連線關(guān)閉時(shí)觸發(fā)。對(duì)應(yīng)close 事件的回呼函數(shù)是onclose。

實(shí)例：

ws.onclose = function(e) {
console.log("Connection closed", e);
};

? ?

5、WebSocket方法

WebSocket 物件有兩種方法：send() 和close()。

A、 send() 方法：

使用WebSocket在客戶端和伺服器之間建立全雙工雙向連線後，就可以在連線開啟時(shí)呼叫send() 方法。使用send() 方法可以從客戶端向伺服器發(fā)送訊息。在發(fā)送一條或多條訊息之後，可以保持連線打開，或是呼叫close() 方法終止連線。

實(shí)例:

ws.send("Hello WebSocket!");

? ?

B、close ()方法：

使用close()方法，可以關(guān)閉WebSocket連線或連線嘗試。如果連線已經(jīng)關(guān)閉，該方法就什麼都不做。在呼叫close()之後，不能在已經(jīng)關(guān)閉的WebSocket上傳送任何資料。可以向close()方法傳遞兩個(gè)可選參數(shù)：code（數(shù)字型的狀態(tài)代碼）和reason（一個(gè)文字字串）。傳遞這些參數(shù)能夠向伺服器傳遞關(guān)於客戶關(guān)閉連線原因的資訊。

註：以上是對(duì)WebSocket的簡(jiǎn)單介紹，以下將用一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)實(shí)時(shí)聊天案例來介紹如何使用WebSocket

A:首先新建一個(gè)項(xiàng)目我這裡叫chatroom，在建一個(gè)包然後新建一個(gè)類用於實(shí)作伺服器端的連線我的類別稱為ChatWebSocketServlet.Java;

具體專案建置如下圖：?

?

B:寫伺服器端實(shí)作類別ChatWebSocketServlet.java，具體程式碼:實(shí)作前臺(tái)頁(yè)面index.jsp（為了展示功能並沒有美化，比較簡(jiǎn)陋）具體程式碼如下：

package com.yc.chat.Servlet;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;
@WebServlet("/chat")
public class ChatWebSocketServlet extends WebSocketServlet {
private final Map<Integer, WsOutbound> map = new HashMap<Integer, WsOutbound>();
private static final long serialVersionUID = -1058445282919079067L;
@Override
protected StreamInbound createWebSocketInbound(String arg0, HttpServletRequest request) {
// StreamInbound：基于流的WebSocket實(shí)現(xiàn)類(帶內(nèi)流)，應(yīng)用程序應(yīng)當(dāng)擴(kuò)展這個(gè)類并實(shí)現(xiàn)其抽象方法onBinaryData和onTextData。
return new ChatMessageInbound();
}
class ChatMessageInbound extends MessageInbound {
// MessageInbound：基于消息的WebSocket實(shí)現(xiàn)類(帶內(nèi)消息)，應(yīng)用程序應(yīng)當(dāng)擴(kuò)展這個(gè)類并實(shí)現(xiàn)其抽象方法onBinaryMessage和onTextMessage。
@Override
protected void onOpen(WsOutbound outbound) {
map.put(outbound.hashCode(), outbound);
super.onOpen(outbound);
}
@Override
protected void onClose(int status) {
map.remove(getWsOutbound().hashCode());
super.onClose(status);
}
@Override
protected void onBinaryMessage(ByteBuffer buffer) throws IOException {
}
@Override
protected void onTextMessage(CharBuffer buffer) throws IOException {
String msg = buffer.toString();
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
msg = " <font color=green>匿名用戶 " + sdf.format(date) + "</font><br/> " + msg;
broadcast(msg);
}
private void broadcast(String msg) {
Set<Integer> set = map.keySet();
for (Integer integer : set) {
WsOutbound outbound = map.get(integer);
CharBuffer buffer = CharBuffer.wrap(msg);
try {
outbound.writeTextMessage(buffer);
outbound.flush();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}

? ?

這樣簡(jiǎn)單的即時(shí)聊天頁(yè)面就做好了，接下來將專案部署到Tomcat 7.0伺服器，並開啟伺服器就可以實(shí)現(xiàn)聊天了

結(jié)果展示：

1.在網(wǎng)址列輸入伺服器位址：

http://127.0.0.1:8080/chatroom/index.jsp

點(diǎn)擊連線伺服器結(jié)果如下：