在沒介紹正文之前，先給大家介紹下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目錄下，接下來就可以編寫前端代碼了，代碼如下（你可以按照自己的喜好編寫）：
<%@ 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> <div> <div> <h1>ShiYanLou Chat</h1> </div> </div> </div> <!-- title end --> <!-- chat content start --> <div> <div> <div> <ul id="message-list"></ul> </div> </div> </div> <!-- chat content start --> <!-- message input start --> <div> <div> <div> <form> <div> <script type="text/plain" id="myEditor"></script> </div> </form> </div> </div> <div> <div> <div id="message-input-nickname"> <span><i></i></span> <input id="nickname" type="text" placeholder="Please enter nickname"/> </div> </div> <div> <button id="send" type="button"> <i></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寫的代碼都是一樣的，代碼如下：
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對象，然後就可以和服務器端進行交互，從瀏覽器發送消息給服務器端，同時要驗證輸入框的內容是否為空，然後接受服務端發送的消息，把它們動態地添加到聊天內容框中，在
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>' + '<a href="javascript:void(0)" ><img src="assets/images/' + (message.isSelf ? 'self.png' : 'others.jpg') + '"/></a>' + '<div><header><div>' + '<a href="javascript:void(0)">' + message.nickname + '</a> <time>' + message.date + '</time></div></header>' + '<div>' + message.content + '</div></div></li>'; $(messageItem).appendTo('#message-list'); // 把滾動條滾動到底部$(".chat-content-container").scrollTop($(".chat-content-container")[0].scrollHeight); }到這步，簡單的網頁聊天室就完成了，你可以多開幾個窗口或在局域網中邀請小伙伴們來一起測試。
六、小結
本次項目課使用WebSocket實現了簡單的網頁聊天室，其實WebSocket不僅可以應用於瀏覽器，也可以應用於桌面客戶端。
七、思考題
本次項目課只是簡單的實現聊天室，其實還有很多功能可以增加，例如頭像上傳功能、一對一聊天功能等，讓我們一起來完善聊天室吧。
看到這裡想不想馬上去試試，點擊這裡--- 為你免費提供在線編譯環境，讓你不再為搭建環境而煩惱
以上所述是小編給大家介紹的使用Java和WebSocket實現網頁聊天室實例代碼的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！