用java WebSocket做一個聊天室

更新時間：2020年11月23日 11:40:48 作者：小二少爺

這篇文章主要為大家詳細介紹了用java WebSocket做一個聊天室，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近一個項目中，需要用到Java的websocket新特性，于是就學(xué)了一下，感覺這技術(shù)還挺好玩的，瞬間知道網(wǎng)頁上面的那些在線客服是怎么做的了。

先看圖：

實現(xiàn)了多客戶機進行實時通訊。

下面看代碼項目結(jié)構(gòu)圖：很簡單，就1個類，1個頁面

然后看具體代碼

先看后端代碼

package com.main;

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;

/**
 * @ServerEndpoint 注解是一個類層次的注解，它的功能主要是將目前的類定義成一個websocket服務(wù)器端,
 *     注解的值將被用于監(jiān)聽用戶連接的終端訪問URL地址,客戶端可以通過這個URL來連接到WebSocket服務(wù)器端
 */
@ServerEndpoint("/websocket")
public class H5ServletServerSocket {
 // 靜態(tài)變量，用來記錄當前在線連接數(shù)。應(yīng)該把它設(shè)計成線程安全的。
 private static int onlineCount = 0;

 // concurrent包的線程安全Set，用來存放每個客戶端對應(yīng)的MyWebSocket對象。若要實現(xiàn)服務(wù)端與單一客戶端通信的話，可以使用Map來存放，其中Key可以為用戶標識
 private static CopyOnWriteArraySet<H5ServletServerSocket> webSocketSet = new CopyOnWriteArraySet<H5ServletServerSocket>();

 // 與某個客戶端的連接會話，需要通過它來給客戶端發(fā)送數(shù)據(jù)
 private Session session;

 /**
 * 連接建立成功調(diào)用的方法
 * 
 * @param session
 *   可選的參數(shù)。session為與某個客戶端的連接會話，需要通過它來給客戶端發(fā)送數(shù)據(jù)
 */
 @OnOpen
 public void onOpen(Session session) {
 this.session = session;
 webSocketSet.add(this); // 加入set中
 addOnlineCount(); // 在線數(shù)加1
 System.out.println("有新連接加入！當前在線人數(shù)為" + getOnlineCount());
 }

 /**
 * 連接關(guān)閉調(diào)用的方法
 */
 @OnClose
 public void onClose() {
 webSocketSet.remove(this); // 從set中刪除
 subOnlineCount(); // 在線數(shù)減1
 System.out.println("有一連接關(guān)閉！當前在線人數(shù)為" + getOnlineCount());
 }

 /**
 * 收到客戶端消息后調(diào)用的方法
 * 
 * @param message
 *   客戶端發(fā)送過來的消息
 * @param session
 *   可選的參數(shù)
 */
 @OnMessage
 public void onMessage(String message, Session session) {
 System.out.println("來自客戶端的消息:" + message);
 // 群發(fā)消息
 for (H5ServletServerSocket item : webSocketSet) {
 try {
 item.sendMessage(message);
 } catch (IOException e) {
 e.printStackTrace();
 continue;
 }
 }
 }

 /**
 * 發(fā)生錯誤時調(diào)用
 * 
 * @param session
 * @param error
 */
 @OnError
 public void onError(Session session, Throwable error) {
 System.out.println("發(fā)生錯誤");
 error.printStackTrace();
 }

 /**
 * 這個方法與上面幾個方法不一樣。沒有用注解，是根據(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--;
 }
}

接下來是前端頁面代碼：

<%@ 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">【狀態(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;

 //判斷當前瀏覽器是否支持WebSocket
 if ('WebSocket' in window) {
 websocket = new WebSocket("ws://10.1.1.106:8080/Socket/websocket");
 } else {
 alert('不支持WebSocket!')
 }

 //連接發(fā)生錯誤的回調(diào)方法
 websocket.onerror = function() {
 setMessageInnerHTML("error");
 };

 //連接成功建立的回調(diào)方法
 websocket.onopen = function(event) {
 setMessageInnerHTML("聊天室開啟");
 }

 //接收到消息的回調(diào)方法
 websocket.onmessage = function() {
 setMessageInnerHTML(event.data);
 }

 //連接關(guān)閉的回調(diào)方法
 websocket.onclose = function() {
 setMessageInnerHTML("聊天室關(guān)閉");
 }

 //監(jiān)聽窗口關(guān)閉事件，當窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。
 window.onbeforeunload = function() {
 websocket.close();
 }

 //將消息顯示在網(wǎng)頁上
 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: