用java WebSocket做一個(gè)聊天室
最近一個(gè)項(xiàng)目中,需要用到Java的websocket新特性,于是就學(xué)了一下,感覺(jué)這技術(shù)還挺好玩的,瞬間知道網(wǎng)頁(yè)上面的那些在線客服是怎么做的了。
先看圖:
實(shí)現(xiàn)了多客戶機(jī)進(jìn)行實(shí)時(shí)通訊。
下面看代碼項(xiàng)目結(jié)構(gòu)圖:很簡(jiǎn)單,就1個(gè)類(lèi),1個(gè)頁(yè)面
然后看具體代碼
先看后端代碼
package com.main; import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet; import javax.websocket.*; import javax.websocket.server.ServerEndpoint; /** * @ServerEndpoint 注解是一個(gè)類(lèi)層次的注解,它的功能主要是將目前的類(lèi)定義成一個(gè)websocket服務(wù)器端, * 注解的值將被用于監(jiān)聽(tīng)用戶連接的終端訪問(wèn)URL地址,客戶端可以通過(guò)這個(gè)URL來(lái)連接到WebSocket服務(wù)器端 */ @ServerEndpoint("/websocket") public class H5ServletServerSocket { // 靜態(tài)變量,用來(lái)記錄當(dāng)前在線連接數(shù)。應(yīng)該把它設(shè)計(jì)成線程安全的。 private static int onlineCount = 0; // concurrent包的線程安全Set,用來(lái)存放每個(gè)客戶端對(duì)應(yīng)的MyWebSocket對(duì)象。若要實(shí)現(xiàn)服務(wù)端與單一客戶端通信的話,可以使用Map來(lái)存放,其中Key可以為用戶標(biāo)識(shí) private static CopyOnWriteArraySet<H5ServletServerSocket> webSocketSet = new CopyOnWriteArraySet<H5ServletServerSocket>(); // 與某個(gè)客戶端的連接會(huì)話,需要通過(guò)它來(lái)給客戶端發(fā)送數(shù)據(jù) private Session session; /** * 連接建立成功調(diào)用的方法 * * @param session * 可選的參數(shù)。session為與某個(gè)客戶端的連接會(huì)話,需要通過(guò)它來(lái)給客戶端發(fā)送數(shù)據(jù) */ @OnOpen public void onOpen(Session session) { this.session = session; webSocketSet.add(this); // 加入set中 addOnlineCount(); // 在線數(shù)加1 System.out.println("有新連接加入!當(dāng)前在線人數(shù)為" + getOnlineCount()); } /** * 連接關(guān)閉調(diào)用的方法 */ @OnClose public void onClose() { webSocketSet.remove(this); // 從set中刪除 subOnlineCount(); // 在線數(shù)減1 System.out.println("有一連接關(guān)閉!當(dāng)前在線人數(shù)為" + getOnlineCount()); } /** * 收到客戶端消息后調(diào)用的方法 * * @param message * 客戶端發(fā)送過(guò)來(lái)的消息 * @param session * 可選的參數(shù) */ @OnMessage public void onMessage(String message, Session session) { System.out.println("來(lái)自客戶端的消息:" + message); // 群發(fā)消息 for (H5ServletServerSocket item : webSocketSet) { try { item.sendMessage(message); } catch (IOException e) { e.printStackTrace(); continue; } } } /** * 發(fā)生錯(cuò)誤時(shí)調(diào)用 * * @param session * @param error */ @OnError public void onError(Session session, Throwable error) { System.out.println("發(fā)生錯(cuò)誤"); error.printStackTrace(); } /** * 這個(gè)方法與上面幾個(gè)方法不一樣。沒(méi)有用注解,是根據(jù)自己需要添加的方法。 * * @param message * @throws IOException */ public void sendMessage(String message) throws IOException { this.session.getBasicRemote().sendText(message); // this.session.getAsyncRemote().sendText(message); } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { H5ServletServerSocket.onlineCount++; } public static synchronized void subOnlineCount() { H5ServletServerSocket.onlineCount--; } }
接下來(lái)是前端頁(yè)面代碼:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML> <html> <head> <base href="<%=basePath%>"> <title>My WebSocket</title> </head> <body> 歡迎進(jìn)入聊天室 <div id="message" style="color: blue">【狀態(tài)】</div> <br /> 昵稱 <input id="username" type="text" required="required"/> <br> 內(nèi)容 <input id="text" type="text" /> <br /> <button onclick="send()">發(fā)送</button> <button onclick="closeWebSocket()">關(guān)閉</button> </body> <script type="text/javascript"> var websocket = null; //判斷當(dāng)前瀏覽器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://10.1.1.106:8080/Socket/websocket"); } else { alert('不支持WebSocket!') } //連接發(fā)生錯(cuò)誤的回調(diào)方法 websocket.onerror = function() { setMessageInnerHTML("error"); }; //連接成功建立的回調(diào)方法 websocket.onopen = function(event) { setMessageInnerHTML("聊天室開(kāi)啟"); } //接收到消息的回調(diào)方法 websocket.onmessage = function() { setMessageInnerHTML(event.data); } //連接關(guān)閉的回調(diào)方法 websocket.onclose = function() { setMessageInnerHTML("聊天室關(guān)閉"); } //監(jiān)聽(tīng)窗口關(guān)閉事件,當(dāng)窗口關(guān)閉時(shí),主動(dòng)去關(guān)閉websocket連接,防止連接還沒(méi)斷開(kāi)就關(guān)閉窗口,server端會(huì)拋異常。 window.onbeforeunload = function() { websocket.close(); } //將消息顯示在網(wǎng)頁(yè)上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //關(guān)閉連接 function closeWebSocket() { websocket.close(); } //發(fā)送消息 function send() { var username = document.getElementById('username').value; var message = document.getElementById('text').value; var msg = "【" + username + "】發(fā)言:" + message websocket.send(msg); } </script> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決idea找不到setting.xml文件的問(wèn)題
這篇文章主要介紹了解決idea找不到setting.xml文件的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-02-02Java?Hibernate中一對(duì)多和多對(duì)多關(guān)系的映射方式
Hibernate是一種Java對(duì)象關(guān)系映射框架,支持一對(duì)多和多對(duì)多關(guān)系的映射。一對(duì)多關(guān)系可以使用集合屬性和單向/雙向關(guān)聯(lián)來(lái)映射,多對(duì)多關(guān)系可以使用集合屬性和中間表來(lái)映射。在映射過(guò)程中,需要注意級(jí)聯(lián)操作、延遲加載、中間表的處理等問(wèn)題2023-04-04java數(shù)據(jù)結(jié)構(gòu)之二分查找法 binarySearch的實(shí)例
這篇文章主要介紹了java數(shù)據(jù)結(jié)構(gòu)之二分查找法 binarySearch的實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家,讓大家理解掌握這部分內(nèi)容,需要的朋友可以參考下2017-10-10HTTPClient如何在Springboot中封裝工具類(lèi)
這篇文章主要介紹了HTTPClient如何在Springboot中封裝工具類(lèi)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09Java Kafka 消費(fèi)積壓監(jiān)控的示例代碼
這篇文章主要介紹了Java Kafka 消費(fèi)積壓監(jiān)控,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-07-07Java快速實(shí)現(xiàn)圖書(shū)管理基本功能
隨著網(wǎng)絡(luò)技術(shù)的高速發(fā)展,計(jì)算機(jī)應(yīng)用的普及,利用計(jì)算機(jī)對(duì)圖書(shū)館的日常工作進(jìn)行管理勢(shì)在必行,本篇文章涵蓋一個(gè)圖書(shū)管理系統(tǒng)的基本功能實(shí)現(xiàn)代碼,大家可以查缺補(bǔ)漏,提升水平2022-05-05springboot?ElasticSearch如何配置自定義轉(zhuǎn)換器ElasticsearchCustomConver
這篇文章主要介紹了springboot?ElasticSearch如何配置自定義轉(zhuǎn)換器ElasticsearchCustomConversions問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08