在沒介紹正文之前，先給大家介紹下websocket的背景和原理：
背景
在瀏覽器中通過http僅能實現單向的通信,comet可以一定程度上模擬雙向通信,但效率較低,并需要服務器有較好的支持; flash中的socket和xmlsocket可以實現真正的雙向通信,通過 flex ajax bridge,可以在javascript中使用這兩項功能. 可以預見,如果websocket一旦在瀏覽器中得到實現,將會替代上面兩項技術,得到廣泛的使用.面對這種狀況，HTML5定義了WebSocket協議，能更好的節省服務器資源和帶寬并達到實時通訊。
在JavaEE7中也實現了WebSocket協議。
原理
WebSocket protocol 。
現很多網站為了實現即時通訊，所用的技術都是輪詢(polling)。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP request，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的HTTP request 的模式帶來很明顯的缺點 – 瀏覽器需要不斷的向服務器發出請求，然而HTTP request 的header是非常長的，里面包含的有用數據可能只是一個很小的值，這樣會占用很多的帶寬。
而比較新的技術去做輪詢的效果是Comet – 用了AJAX。但這種技術雖然可達到全雙工通信，但依然需要發出請求。
在 WebSocket API，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。在此WebSocket 協議中，為我們實現即時服務帶來了兩大好處：
1. Header
互相溝通的Header是很小的-大概只有 2 Bytes
2. Server Push
服務器的推送，服務器不再被動的接收到瀏覽器的request之后才返回數據，而是在有新數據時就主動推送給瀏覽器。
一、項目簡介
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目錄下，接下來就可以編寫前端代碼了，代碼如下（你可以按照自己的喜好編寫）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<%@ 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><!-- Set render engine for 360 browser --><meta name="renderer" content="webkit"><!-- No Baidu Siteapp--><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"><!-- umeditor 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> <!-- title start --> <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> <!-- title end --> <!-- chat content start --> <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> <!-- chat content start --> <!-- message input start --> <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> <!-- message input end --> <!--[if (gte IE 9)|!(IE)]><!--> <script src="assets/js/jquery.min.js"></script> <!--<![endif]--> <!--[if lte IE 8 ]> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <![endif]--> <!-- umeditor js --> <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寫的代碼都是一樣的，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
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"); // 日期格式化 @OnOpen public void open(Session session) { // 添加初始化操作 } /** * 接受客戶端的消息，并把消息發送給所有連接的會話 * @param message 客戶端發來的消息 * @param session 客戶端的會話 */ @OnMessage public 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()); } } @OnClose public void close() { // 添加關閉會話時的操作 } @OnError public void error(Throwable t) { // 添加處理錯誤的操作 }} |
4. 前后臺交互
后臺寫完了，前臺要用WebSocket連接后臺，需要新建一個WebSocket對象，然后就可以和服務器端進行交互，從瀏覽器發送消息給服務器端，同時要驗證輸入框的內容是否為空，然后接受服務端發送的消息，把它們動態地添加到聊天內容框中，在
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
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') + '" id="codetool">
到這步，簡單的網頁聊天室就完成了，你可以多開幾個窗口或在局域網中邀請小伙伴們來一起測試。 六、小結 本次項目課使用WebSocket實現了簡單的網頁聊天室，其實WebSocket不僅可以應用于瀏覽器，也可以應用于桌面客戶端。 七、思考題 本次項目課只是簡單的實現聊天室，其實還有很多功能可以增加，例如頭像上傳功能、一對一聊天功能等，讓我們一起來完善聊天室吧。 看到這里想不想馬上去試試，點擊這里--- 為你免費提供在線編譯環境，讓你不再為搭建環境而煩惱 以上所述是小編給大家介紹的使用Java和WebSocket實現網頁聊天室實例代碼的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對服務器之家網站的支持！ 延伸 · 閱讀
精彩推薦
最近更新 編輯推薦
閱讀排行 |
