最近一個項目中,需要用到Java的websocket新特性,于是就學了一下,感覺這技術還挺好玩的,瞬間知道網頁上面的那些在線客服是怎么做的了。
先看圖:


實現了多客戶機進行實時通訊。
下面看代碼項目結構圖:很簡單,就1個類,1個頁面

然后看具體代碼
先看后端代碼
package com.main;import java.io.IOException;import java.util.concurrent.CopyOnWriteArraySet;import javax.websocket.*;import javax.websocket.server.ServerEndpoint;/** * @ServerEndpoint 注解是一個類層次的注解,它的功能主要是將目前的類定義成一個websocket服務器端, * 注解的值將被用于監聽用戶連接的終端訪問URL地址,客戶端可以通過這個URL來連接到WebSocket服務器端 */@ServerEndpoint("/websocket")public class H5ServletServerSocket { // 靜態變量,用來記錄當前在線連接數。應該把它設計成線程安全的。 private static int onlineCount = 0; // concurrent包的線程安全Set,用來存放每個客戶端對應的MyWebSocket對象。若要實現服務端與單一客戶端通信的話,可以使用Map來存放,其中Key可以為用戶標識 private static CopyOnWriteArraySet<H5ServletServerSocket> webSocketSet = new CopyOnWriteArraySet<H5ServletServerSocket>(); // 與某個客戶端的連接會話,需要通過它來給客戶端發送數據 private Session session; /** * 連接建立成功調用的方法 * * @param session * 可選的參數。session為與某個客戶端的連接會話,需要通過它來給客戶端發送數據 */ @OnOpen public void onOpen(Session session) { this.session = session; webSocketSet.add(this); // 加入set中 addOnlineCount(); // 在線數加1 System.out.println("有新連接加入!當前在線人數為" + getOnlineCount()); } /** * 連接關閉調用的方法 */ @OnClose public void onClose() { webSocketSet.remove(this); // 從set中刪除 subOnlineCount(); // 在線數減1 System.out.println("有一連接關閉!當前在線人數為" + getOnlineCount()); } /** * 收到客戶端消息后調用的方法 * * @param message * 客戶端發送過來的消息 * @param session * 可選的參數 */ @OnMessage public void onMessage(String message, Session session) { System.out.println("來自客戶端的消息:" + message); // 群發消息 for (H5ServletServerSocket item : webSocketSet) { try { item.sendMessage(message); } catch (IOException e) { e.printStackTrace(); continue; } } } /** * 發生錯誤時調用 * * @param session * @param error */ @OnError public void onError(Session session, Throwable error) { System.out.println("發生錯誤"); error.printStackTrace(); } /** * 這個方法與上面幾個方法不一樣。沒有用注解,是根據自己需要添加的方法。 * * @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--; }}接下來是前端頁面代碼:
<%@ 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> 歡迎進入聊天室 <div id="message" style="color: blue">【狀態】</div> <br /> 昵稱 <input id="username" type="text" required="required"/> <br> 內容 <input id="text" type="text" /> <br /> <button onclick="send()">發送</button> <button onclick="closeWebSocket()">關閉</button></body><script type="text/javascript"> var websocket = null; //判斷當前瀏覽器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://10.1.1.106:8080/Socket/websocket"); } else { alert('不支持WebSocket!') } //連接發生錯誤的回調方法 websocket.onerror = function() { setMessageInnerHTML("error"); }; //連接成功建立的回調方法 websocket.onopen = function(event) { setMessageInnerHTML("聊天室開啟"); } //接收到消息的回調方法 websocket.onmessage = function() { setMessageInnerHTML(event.data); } //連接關閉的回調方法 websocket.onclose = function() { setMessageInnerHTML("聊天室關閉"); } //監聽窗口關閉事件,當窗口關閉時,主動去關閉websocket連接,防止連接還沒斷開就關閉窗口,server端會拋異常。 window.onbeforeunload = function() { websocket.close(); } //將消息顯示在網頁上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //關閉連接 function closeWebSocket() { websocket.close(); } //發送消息 function send() { var username = document.getElementById('username').value; var message = document.getElementById('text').value; var msg = "【" + username + "】發言:" + message websocket.send(msg); }</script></html>以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答