首頁 > php教程 > PHP开发 > HTML5基於Tomcat 7.0實現WebSocket連接並實現簡單的即時聊天

HTML5基於Tomcat 7.0實現WebSocket連接並實現簡單的即時聊天

高洛峰
發布: 2016-12-08 13:37:05
原創
1465 人瀏覽過

1、什麼是WebSocket?

WebSocket 是一種自然的全雙工、雙向、單套接字連接。使用WebSocket,你的HTTP 請求變成開啟WebSocket 連線(WebSocket 或WebSocket over TLS(TransportLayer Security,傳輸層安全性,原稱「SSL」))的單一請求,並且重複使用從客戶端到伺服器以及伺服器到客戶端的同一連接。 WebSocket 減少了延遲,因為一旦建立起WebSocket 連接,伺服器可以在訊息可用時發送它們。例如,和輪詢不同,WebSocket只發出一個請求。伺服器不需要等待來自客戶端的請求。相似地,客戶端可以在任何時候向伺服器發送訊息。相較於輪詢不管是否有可用訊息,每隔一段時間都發送一個請求,單一請求大大減少了延遲。

2、WebSocket API

WebSocket API 讓你可以透過Web,在客戶端應用程式和伺服器端進程之間建立全雙工的雙向通訊。 WebSocket 介面規定了可用於客戶端的方法以及客戶端與網路的互動方式。 

3、WebSocket建構子

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

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

4、WebSocket事件

WebSocket API 是純事件驅動的。應用程式程式碼監聽WebSocket物件上的事件,以便處理輸入資料和連線狀態的改變。 WebSocket協定也是事件驅動的。

WebSocket物件調度4個不同的事件:

A、open事件:

一旦伺服器回應了WebSocket連線請求,open事件觸發並建立一個連線。 open事件對應的回呼函數稱為onopen

實例:

ws.onopen = function(e) {
console.log("Connection open...");
};
登入後複製

   

B、messagess事件: 

message事件在接收到訊息時觸發事件對應於訊息的回調。 

實例:

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 事件在響應意外故障的時候觸發。與該事件對應的回呼函數為onerror。 
實例:

ws.onerror = function(e){
console.log('websocked error');
handerError();
}
登入後複製

   

D、close事件:

close 事件在WebSocket 連線關閉時觸發。對應close 事件的回呼函數是onclose。

實例:

ws.onclose = function(e) {
console.log("Connection closed", e);
};
登入後複製

   

5、WebSocket方法

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

A、 send() 方法:

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

實例:

ws.send("Hello WebSocket!");
登入後複製

   

B、close ()方法:

使用close()方法,可以關閉WebSocket連線或連線嘗試。如果連線已經關閉,該方法就什麼都不做。在呼叫close()之後,不能在已經關閉的WebSocket上傳送任何資料。可以向close()方法傳遞兩個可選參數:code(數字型的狀態代碼)和reason(一個文字字串)。傳遞這些參數能夠向伺服器傳遞關於客戶關閉連線原因的資訊。

註:以上是對WebSocket的簡單介紹,以下將用一個簡單的網頁實時聊天案例來介紹如何使用WebSocket

A:首先新建一個項目我這裡叫chatroom,在建一個包然後新建一個類用於實作伺服器端的連線我的類別稱為ChatWebSocketServlet.Java;

具體專案建置如下圖: 

 

B:寫伺服器端實作類別ChatWebSocketServlet.java,具體程式碼:實作前台頁面index.jsp(為了展示功能並沒有美化,比較簡陋)具體程式碼如下:

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实现类(带内流),应用程序应当扩展这个类并实现其抽象方法onBinaryData和onTextData。
return new ChatMessageInbound();
}
class ChatMessageInbound extends MessageInbound {
// MessageInbound:基于消息的WebSocket实现类(带内消息),应用程序应当扩展这个类并实现其抽象方法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();
}
}
}
}
}
登入後複製

   

這樣簡單的即時聊天頁面就做好了,接下來將專案部署到Tomcat 7.0伺服器,並開啟伺服器就可以實現聊天了

結果展示:

1.在網址列輸入伺服器位址:

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

點擊連線伺服器結果如下:

2.分別在兩個不同的瀏覽器打開並互相發送訊息(我這裡用谷歌和火狐)結果如下: 

HTML5基於Tomcat 7.0實現WebSocket連接並實現簡單的即時聊天

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板