一、系統演示
1.1 聊天窗體主介面演示
1.2 模擬兩人線上聊天（點選圖片檢視演示視訊）
1.3 線上演示
> 線上演示，點選進入系統
到這裡，若是您想要的，接下來聽我娓娓道來
二、開發工具
開發軟體：JDK7.0、MyEclipse 2014
開發語言：Java、HTML、Javascript
資料庫：MySQL5.6
伺服器：Tomcat7.0
三、系統介紹
本系統採用了 B/S 體系結構，以 MySql 作為資料庫管理資料，以 JSP 作為前端開發語音，採用當前最流行的 SSM 框架（Spring+SpringMVC+MyBatis），標準的 MVC 模式，將整個系統劃分為表現層，controller 層，service 層，dao 層四層，完美整合即時聊天通訊於後臺管理系統當中。
本系統仿QQ整合了一套完整的即時聊天功能，包含一對一聊天以及多對多群聊，往著美觀大氣使用者體驗高的方針，把分組、好友、群聊完美完整地呈現於主窗體。
主窗體：個性化簽名、快速搜尋、訊息盒子、查詢好友查詢群組（新增好友、加入群組）、更換面板等功能
分組：新增分組、重新命名、刪除分組、重新整理好友列表
好友：傳送即時聊天、檢視好友資料、檢視好友聊天記錄、移動好友分組、刪除好友
群組：傳送群聊資訊、檢視群組資料、檢視群組聊天記錄、修改群組圖示、建立群組、解散群組、退出群組、重新整理群組列表、新增群成員、踢除群成員
聊天：支援常見的文字、表情、圖片聊天，還支援傳送檔案、分享音樂視訊，傳送程式碼等功能
四、功能介紹
下面詳細介紹主要功能使用與實現：
4.1 整合右鍵選單
聊天主窗體最可觀的操作方式莫過於右鍵選單，本系統整合幾大右鍵功能，分別是右鍵友好、右鍵分組、右鍵群組、右鍵好友介面的空白地方、右鍵群組介面的空白地方（如下圖）。
| 右鍵友好 | 右鍵分組 | 右鍵群組 |
 |
 |
 |
即時通訊聊天系統：`整合右鍵選單`教程，點選進入
4.2 新增好友、加入群組
聊天系統新增好友為最重要功能，本系統在主窗體底部中間“+”號按鈕整合查詢好友查詢群組功能，如下圖。
查詢介面可根據姓名、手機號或職位進行搜尋，找到目標點選“+好友”按鈕，系統將推送一條訊息到對方的訊息盒子，待對方驗證通過後，申請新增好友便成功，加入群組也是同理。
即時通訊聊天系統：`新增好友進入群組`教程，點選進入
4.3 檢視更多聊天記錄
檢視好友的聊天記錄、檢視群組的聊天記錄，是即時通訊不可或缺的功能，本系統在好友的右鍵選單中整合了該功能，好友聊天介面也整合了便捷入口，檢視記錄介面如下圖：
即時通訊聊天系統：`檢視更多聊天記錄`教程，點選進入
4.4 繫結未讀訊息數量
在您離線的時候，您的好友傳送訊息給你，當您登入系統時，避免未能及時檢視，應當繫結未讀數量於好友末尾，並高亮顯示，如下圖，對未讀訊息一目瞭然！
即時通訊聊天系統：`繫結未讀訊息數量`教程，點選進入
4.5 移動好友分組
為了容易管理和查詢好友，本系統整理了移動好友功能，比如將您們都喜歡的楊冪小姐姐移動到女神分組，如下圖，下次找女神聊天就簡單多了。
即時通訊聊天系統：`移動好友分組`教程，點選進入
4.6 重新整理好友列表
右鍵分組或右鍵好友窗體空白地方時，右鍵選單繫結重新整理好友列表，重新繫結即可，看是簡單，其中暗藏玄機，值得關注！
即時通訊聊天系統：`重新整理好友列表`教程，點選進入
4.7 邀請好友加入群組
開啟群組成員，在成員列表前面繫結新增群成員與刪除群成員圖示（如下左圖），點選新增群成員圖示，彈出新增群員介面（如下右圖）。
| 群成員 | 加入好友 |
 |
 |
即時通訊聊天系統：`邀請好友加入群組`教程，點選進入
4.8 修改群組頭像
右鍵群組時，右鍵選單繫結修改群圖示。本系統基於Croppe外掛，實現HTML5裁剪圖片並上傳功能，支援部門裁剪左右旋轉，先來看看效果圖：
即時通訊聊天系統：`修改群組頭像`教程，點選進入
4.9 整合WebSocket即時通訊
WebSocket使得客戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料，是聊天系統即時通訊的良藥，本教程介紹兩個整合版本：
即時通訊聊天系統：`Java原生整合WebSocket通訊`教程，點選進入
即時通訊聊天系統：`Spring完美整合WebSocket通訊`教程，點選進入
Socket傳送長訊息（如圖片16進位制），有時會自動斷開伺服器連線，附上對策：
即時通訊聊天系統：`調整WebSocket緩衝區大小`教程，點選進入
五、附上原始碼
帥氣的人就要唾手可得，原始碼下載：Java網頁版仿QQ聊天系統（完整案例）
六、猜您喜歡
> 更多小系統與您見面：搭我一程
創作不容易，若對您有幫助，歡迎收藏，記得`賞個好評`。