當前位置：首頁 > 编程语言 > java >内容正文

java

Java和WebSocket开发网页聊天室

發布時間：2024/4/14 java 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 Java和WebSocket开发网页聊天室小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?

一、項目簡介

WebSocket是HTML5一種新的協議，它實現了瀏覽器與服務器全雙工通信，這里就將使用WebSocket來開發網頁聊天室，前端框架會使用AmazeUI，后臺使用Java，編輯器使用UMEditor。

二、涉及知識點

網頁前端（HTML+CSS+JS）和Java

三、軟件環境

Tomcat 7

JDK 7

Eclipse JavaEE

現代瀏覽器

四、效果截圖

效果1

效果2

五、項目實戰

1. 新建項目

打開Eclipse JavaEE，新建一個名為Chat的Dynamic Web Project，然后導入處理JSON格式字符串所需要的包，把commons-beanutils-1.8.0.jar、commons-collections-3.2.1.jar、commons-lang-2.5.jar、commons-logging-1.1.1.jar、ezmorph-1.0.6.jar和json-lib-2.4-jdk15.jar這幾個包放在WebContent/WEB-INF/lib目錄下，最后把項目發布到Tomcat服務器上，到此空項目就搭建完成了。

2. 編寫前端頁面

在WebContent目錄下新建一個名為index.jsp的頁面，這里使用了AmazeUI框架，它是一個跨屏自適應的前端框架，消息輸入框使用了UMEditor，它是一個富文本在線編輯器，能讓我們的消息內容多姿多彩。

首先從AmazeUI官網下載壓縮包，然后解壓把assets文件夾拷貝到WebContent目錄下，這樣我們就能使用AmazeUI了。

再從UEditer官網下載Mini版的JSP版本壓縮包，解壓后把整個目錄拷貝到WebContent目錄下，接下來就可以編寫前端代碼了，代碼如下（你可以按照自己的喜好編寫）：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ShiYanLou Chat</title> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="alternate icon" href="assets/i/favicon.ico"> <link rel="stylesheet" href="assets/css/amazeui.min.css"> <link rel="stylesheet" href="assets/css/app.css"> <link href="umeditor/themes/default/css/umeditor.css" rel="stylesheet"><style> .title {text-align: center; }.chat-content-container {height: 29rem;overflow-y: scroll;border: 1px solid silver; } </style> </head> <body><div class="title"><div class="am-g am-g-fixed"><div class="am-u-sm-12"><h1 class="am-text-primary">ShiYanLou Chat</h1></div></div></div><div class="chat-content"><div class="am-g am-g-fixed chat-content-container"><div class="am-u-sm-12"><ul id="message-list" class="am-comments-list am-comments-list-flip"></ul></div></div></div><div class="message-input am-margin-top"><div class="am-g am-g-fixed"><div class="am-u-sm-12"><form class="am-form"><div class="am-form-group"><script type="text/plain" id="myEditor" style="width: 100%;height: 8rem;"></script></div></form></div></div><div class="am-g am-g-fixed am-margin-top"><div class="am-u-sm-6"><div id="message-input-nickname" class="am-input-group am-input-group-primary"><span class="am-input-group-label"><i class="am-icon-user"></i></span><input id="nickname" type="text" class="am-form-field" placeholder="Please enter nickname"/></div></div><div class="am-u-sm-6"><button id="send" type="button" class="am-btn am-btn-primary"><i class="am-icon-send"></i> Send</button></div></div></div><script src="assets/js/jquery.min.js"></script><script charset="utf-8" src="umeditor/umeditor.config.js"></script><script charset="utf-8" src="umeditor/umeditor.min.js"></script><script src="umeditor/lang/zh-cn/zh-cn.js"></script><script>$(function() {// 初始化消息輸入框var um = UM.getEditor('myEditor');// 使昵稱框獲取焦點$('#nickname')[0].focus();});</script> </body> </html>

編寫完成之后啟動Tomcat服務器，然后訪問http://localhost:8080/Chat/index.jsp?，會看到如下界面。

3. 編寫后臺代碼

新建一個com.shiyanlou.chat的包，在包中創建一個名為ChatServer的類，從JavaEE 7開始就統一了WebSocket的API，因此無論是什么服務器，用Java寫的代碼都是一樣的，代碼如下：

package com.shiyanlou.chat;import java.text.SimpleDateFormat; import java.util.Date;import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint;import net.sf.json.JSONObject;/*** 聊天服務器類* @author shiyanlou**/ @ServerEndpoint("/websocket") public class ChatServer {private static final SimpleDateFormat DATE_FORMAT = new SimpleDateFormat("yyyy-MM-dd HH:mm"); // 日期格式化@OnOpenpublic void open(Session session) {// 添加初始化操作}/*** 接受客戶端的消息，并把消息發送給所有連接的會話* @param message 客戶端發來的消息* @param session 客戶端的會話*/@OnMessagepublic void getMessage(String message, Session session) {// 把客戶端的消息解析為JSON對象JSONObject jsonObject = JSONObject.fromObject(message);// 在消息中添加發送日期jsonObject.put("date", DATE_FORMAT.format(new Date()));// 把消息發送給所有連接的會話for (Session openSession : session.getOpenSessions()) {// 添加本條消息是否為當前會話本身發的標志jsonObject.put("isSelf", openSession.equals(session));// 發送JSON格式的消息openSession.getAsyncRemote().sendText(jsonObject.toString());}}@OnClosepublic void close() {// 添加關閉會話時的操作}@OnErrorpublic void error(Throwable t) {// 添加處理錯誤的操作} }

4. 前后臺交互

后臺寫完了，前臺要用WebSocket連接后臺，需要新建一個WebSocket對象，然后就可以和服務器端進行交互，從瀏覽器發送消息給服務器端，同時要驗證輸入框的內容是否為空，然后接受服務端發送的消息，把它們動態地添加到聊天內容框中，在

var um = UM.getEditor('myEditor'); $('#nickname')[0].focus();

之后添加代碼如下：

// 新建WebSocket對象，最后的/websocket對應服務器端的@ServerEndpoint("/websocket") var socket = new WebSocket('ws://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${pageContext.request.contextPath}/websocket');// 處理服務器端發送的數據socket.onmessage = function(event) {addMessage(event.data);};// 點擊Send按鈕時的操作$('#send').on('click', function() {var nickname = $('#nickname').val();if (!um.hasContents()) { // 判斷消息輸入框是否為空// 消息輸入框獲取焦點um.focus();// 添加抖動效果$('.edui-container').addClass('am-animation-shake');setTimeout("$('.edui-container').removeClass('am-animation-shake')", 1000);} else if (nickname == '') { // 判斷昵稱框是否為空//昵稱框獲取焦點$('#nickname')[0].focus();// 添加抖動效果$('#message-input-nickname').addClass('am-animation-shake');setTimeout("$('#message-input-nickname').removeClass('am-animation-shake')", 1000);} else {// 發送消息socket.send(JSON.stringify({content : um.getContent(),nickname : nickname}));// 清空消息輸入框um.setContent('');// 消息輸入框獲取焦點um.focus();}});// 把消息添加到聊天內容中function addMessage(message) {message = JSON.parse(message);var messageItem = '<li class="am-comment '+ (message.isSelf ? 'am-comment-flip' : 'am-comment')+ '">'+ '<a href="javascript:void(0)" ><img src="assets/images/'+ (message.isSelf ? 'self.png' : 'others.jpg')+ '" alt="" class="am-comment-avatar" width="48" height="48"/></a>'+ '<div class="am-comment-main"><header class="am-comment-hd"><div class="am-comment-meta">'+ '<a href="javascript:void(0)" class="am-comment-author">'+ message.nickname + '</a> <time>' + message.date+ '</time></div></header>'+ '<div class="am-comment-bd">' + message.content+ '</div></div></li>';$(messageItem).appendTo('#message-list');// 把滾動條滾動到底部$(".chat-content-container").scrollTop($(".chat-content-container")[0].scrollHeight);}

到這步，簡單的網頁聊天室就完成了，你可以多開幾個窗口或在局域網中邀請小伙伴們來一起測試。

六、小結

本次項目課使用WebSocket實現了簡單的網頁聊天室，其實WebSocket不僅可以應用于瀏覽器，也可以應用于桌面客戶端。

七、思考題

本次項目課只是簡單的實現聊天室，其實還有很多功能可以增加，例如頭像上傳功能、一對一聊天功能等，讓我們一起來完善聊天室吧。

看到這里想不想馬上去試試，點擊這里---為你免費提供在線編譯環境，讓你不再為搭建環境而煩惱

超強干貨來襲云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的Java和WebSocket开发网页聊天室的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Laravel大型项目系列教程（三）之发
下一篇： java美元兑换,（Java实现）美元