HTML5基于Tomcat 7.0實(shí)現(xiàn)WebSocket連接并實(shí)現(xiàn)簡單的實(shí)時(shí)聊天
1、什么是WebSocket?
WebSocket 是一種自然的全雙工、雙向、單套接字連接。使用WebSocket,你的HTTP 請(qǐng)求變成打開WebSocket 連接(WebSocket 或者WebSocket over TLS(TransportLayer Security,傳輸層安全性,原稱“SSL”))的單一請(qǐng)求,并且重用從客戶端到服務(wù)器以及服務(wù)器到客戶端的同一連接。WebSocket 減少了延遲,因?yàn)橐坏┙⑵餡ebSocket 連接,服務(wù)器可以在消息可用時(shí)發(fā)送它們。例如,和輪詢不同,WebSocket只發(fā)出一個(gè)請(qǐng)求。服務(wù)器不需要等待來自客戶端的請(qǐng)求。相似地,客戶端可以在任何時(shí)候向服務(wù)器發(fā)送消息。相比輪詢不管是否有可用消息,每隔一段時(shí)間都發(fā)送一個(gè)請(qǐng)求,單一請(qǐng)求大大減少了延遲。
2、WebSocket API
WebSocket API 使你可以通過Web,在客戶端應(yīng)用程序和服務(wù)器端進(jìn)程之間建立全雙工的雙向通信。WebSocket 接口規(guī)定了可用于客戶端的方法以及客戶端與網(wǎng)絡(luò)的交互方式。
3、WebSocket構(gòu)造函數(shù)
為了建立到服務(wù)器的WebSocket連接,使用WebSocket接口,通過指向一個(gè)代表所要連接端點(diǎn)的URL,實(shí)例化一個(gè)WebSocket對(duì)象。WebSocket 協(xié)議定義了兩種URL方案(URL scheme)—ws和wss,分別用于客戶端和服務(wù)器之間的非加密與加密流量。
實(shí)例:var ws = new WebSocket("ws://www.websocket.org");
4、WebSocket事件
WebSocket API 是純事件驅(qū)動(dòng)的。應(yīng)用程序代碼監(jiān)聽WebSocket對(duì)象上的事件,以便處理輸入數(shù)據(jù)和連接狀態(tài)的改變。WebSocket協(xié)議也是事件驅(qū)動(dòng)的。
WebSocket對(duì)象調(diào)度4個(gè)不同的事件:
A、open事件:
一旦服務(wù)器響應(yīng)了WebSocket連接請(qǐng)求,open事件觸發(fā)并建立一個(gè)連接。open事件對(duì)應(yīng)的回調(diào)函數(shù)稱作onopen
實(shí)例:
ws.onopen = function(e) { console.log("Connection open..."); };
B、messagess事件:
message事件在接收到消息時(shí)觸發(fā),對(duì)應(yīng)于該事件的回調(diào)函數(shù)是onmessage。
實(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)的回調(diào)函數(shù)為onerror。
實(shí)例:
ws.onerror = function(e){ console.log('websocked error'); handerError(); }
D、close事件:
close 事件在WebSocket 連接關(guān)閉時(shí)觸發(fā)。對(duì)應(yīng)于close 事件的回調(diào)函數(shù)是onclose。
實(shí)例:
ws.onclose = function(e) { console.log("Connection closed", e); };
5、WebSocket方法
WebSocket 對(duì)象有兩個(gè)方法:send() 和close()。
A、 send() 方法:
使用WebSocket在客戶端和服務(wù)器之間建立全雙工雙向連接后,就可以在連接打開時(shí)調(diào)用send() 方法。使用send() 方法可以從客戶端向服務(wù)器發(fā)送消息。在發(fā)送一條或者多條消息之后,可以保持連接打開,或者調(diào)用close() 方法終止連接。
實(shí)例:
ws.send("Hello WebSocket!");
B、close ()方法:
使用close()方法,可以關(guān)閉WebSocket連接或者終止連接嘗試。如果連接已經(jīng)關(guān)閉,該方法就什么都不做。在調(diào)用close()之后,不能在已經(jīng)關(guān)閉的WebSocket上發(fā)送任何數(shù)據(jù)??梢韵騝lose()方法傳遞兩個(gè)可選參數(shù):code(數(shù)字型的狀態(tài)代碼)和reason(一個(gè)文本字符串)。傳遞這些參數(shù)能夠向服務(wù)器傳遞關(guān)于客戶關(guān)閉連接原因的信息。
注:以上是對(duì) WebSocket的簡單介紹,下面將用一個(gè)簡單的網(wǎng)頁實(shí)時(shí)聊天案例來介紹如何使用WebSocket
A:首先新建一個(gè)項(xiàng)目我這里叫chatroom,在建一個(gè)包然后新建一個(gè)類用于實(shí)現(xiàn)服務(wù)器端的連接我的類名叫ChatWebSocketServlet.Java;
具體項(xiàng)目搭建如下圖:
B:寫服務(wù)器端實(shí)現(xiàn)類ChatWebSocketServlet.java,具體代碼如下:
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(); } } } } }
C:實(shí)現(xiàn)前臺(tái)頁面index.jsp(為了展示功能并沒有美化,比較簡陋)具體代碼如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>websocket聊天室</title> <style type="text/css"> #chat { text-align: left; width: 600px; height: 500px; width: 600px; } #up { text-align: left; width: 100%; height: 400px; border: 1px solid green; OVERFLOW-Y: auto; } #down { text-align: left; height: 100px; width: 100%; } </style> </head> <body> <h2 align="center">基于HTML5的聊天室</h2> <div align="center" style="width: 100%; height: 700px;"> <div id="chat"> <div id="up"></div> <div id="down"> <textarea type="text" style="width: 602px; height: 100%;" id="send"></textarea> </div> </div> <input type="button" value="連接" onclick="chat(this);"> <input type="button" value="發(fā)送" onclick="send(this);" disabled="disabled" id="send_btn" title="Ctrl+Enter發(fā)送"> </div> </body> <script type="text/javascript"> var socket; var receive_text = document.getElementById("up"); var send_text = document.getElementById("send"); function addText(msg) { receive_text.innerHTML += "<br/>" + msg; receive_text.scrollTop = receive_text.scrollHeight; } var chat = function(obj) { obj.disabled = "disabled"; socket = new WebSocket('ws://localhost:8080/chatroom/chat'); receive_text.innerHTML += "<font color=green>正在連接服務(wù)器……</font>"; //打開Socket socket.onopen = function(event) { addText("<font color=green>連接成功!</font>"); document.getElementById("send_btn").disabled = false; send_text.focus(); document.onkeydown = function(event) { if (event.keyCode == 13 && event.ctrlKey) { send(); } } }; socket.onmessage = function(event) { addText(event.data); }; socket.onclose = function(event) { addText("<font color=red>連接斷開!</font>"); obj.disabled = ""; }; if (socket == null) { addText("<font color=red>連接失??!</font>"); } }; var send = function(obj) { if (send_text.value == "") { return; } socket.send(send_text.value); send_text.value = ""; send_text.focus(); } </script> </html>
這樣一個(gè)簡單的實(shí)時(shí)聊天頁面就做好了,接下來將項(xiàng)目部署到Tomcat 7.0服務(wù)器,并開啟服務(wù)器就可以實(shí)現(xiàn)聊天了
結(jié)果展示:
1.在地址欄輸入服務(wù)器地址:
http://127.0.0.1:8080/chatroom/index.jsp
點(diǎn)擊連接服務(wù)器結(jié)果如下:
2.分別在兩個(gè)不同的瀏覽器打開并互相發(fā)送信息(我這里用谷歌和火狐)結(jié)果如下:
以上所述是小編給大家介紹的HTML5基于Tomcat 7.0實(shí)現(xiàn)WebSocket連接并實(shí)現(xiàn)簡單的實(shí)時(shí)聊天,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 詳解tomcat部署靜態(tài)html網(wǎng)站方法
- tomcat部署簡單的html靜態(tài)網(wǎng)頁的方法
- Idea2020.2創(chuàng)建JavaWeb項(xiàng)目(部署Tomcat)方法詳解
- Jenkins+tomcat自動(dòng)發(fā)布的熱部署/重啟及遇到的問題解決辦法(推薦)
- 在idea中將創(chuàng)建的java web項(xiàng)目部署到Tomcat中的過程圖文詳解
- idea打包成war包部署到tomcat及訪問路徑問題(圖文詳解)
- Tomcat部署多個(gè)war包的方法步驟
- Linux下安裝tomcat并部署網(wǎng)站(推薦)
- Tomcat和Weblogic部署純html文件過程解析
相關(guān)文章
根據(jù)地區(qū)不同顯示時(shí)間的javascript代碼
根據(jù)地區(qū)不同顯示時(shí)間的javascript代碼...2007-08-08D3.js 從P元素的創(chuàng)建開始(顯示可加載數(shù)據(jù))
D3是一個(gè)基于數(shù)據(jù)操作的可視化js庫,認(rèn)識(shí)d3,就從最基礎(chǔ)的顯示可加載數(shù)據(jù)談起,需要的朋友可以參考下2014-10-10JavaScript設(shè)計(jì)模式之代理模式實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之代理模式,簡單描述了代理模式的概念、原理并結(jié)合實(shí)例形式分析了javascript代理模式的相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2019-01-01javaScript 讀取和設(shè)置文檔元素的樣式屬性
有時(shí)候我們需要用js設(shè)置文檔的樣式屬性,下面就是一些方法與原理分析,大家可以看下,應(yīng)該就沒問題了。2009-04-04微信小程序?qū)崿F(xiàn)保存圖片到相冊(cè)功能
項(xiàng)目中有個(gè)保存二維碼到相冊(cè)的功能,所以涉及到用戶是否授權(quán)相冊(cè)權(quán)限的問題。這篇文章主要介紹了微信小程序?qū)崿F(xiàn)保存圖片到相冊(cè)功能,需要的朋友可以參考下2018-11-11你可能從未使用過的11+個(gè)JavaScript特性(小結(jié))
這篇文章主要介紹了你可能從未使用過的11+個(gè)JavaScript特性(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01