HTML5 WebSocket JavaWeb 實現簡單的聊天室功能

時間 2019-11-08

標籤 html5 html websocket javaweb 實現簡單聊天室功能欄目 HTML5 简体版

原文原文鏈接

本實例使用websocket實現了即時聊天系統，websocket技術能夠在網頁中使用js技術完成與後臺的通信, 然後臺tomcat集成了websocket功能, 只須要不多的代碼就能夠完成很強大的功能, 基於此聊天系統能夠擴展成實時展現系統, 如網頁中顯示股票信息【數據實時變化】, 網頁中顯示交通實況信息等javascript

本文demo下載：http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1052css

項目對應的實例代碼能夠經過【點擊下載】進行下載html

項目開發工具Eclipse, JDK1.7, Maven3.0.4, tomcat8 等工具也能夠在【工具下載】欄目中下載前端

項目包含內容(見下圖):java

BarrageClient-master.zip 客戶端源碼jquery

Barrage-master.zip 服務端源碼web

介紹:bootstrap

WebSocket是HTML5規範新引入的功能，用於解決瀏覽器與後臺服務器雙向通信的問題，使用WebSocket技術，後臺能夠隨時向前端推送消息，以保證先後臺狀態統一，在傳統的無狀態HTTP協議中，這是「沒法作到」的。api

原理:瀏覽器

客戶端由HTML5 websocket監聽，客戶端發送長鏈接，後臺請求阻塞實現服務端消息實時更新.

服務端得到當前鏈接中的全部請求ID，實時推送消息.

首先上最終結果圖:

張三聊天界面:

李四聊天界面:

頁面樣式用的bootstrap簡單的畫了一下

客戶端的目錄結構:

客戶端一共就三個文件，主要是index.html和index.js，core.js裏面只寫了一些工具方法

下面上index.js的代碼也就是客戶端的實現:

ws://127.0.0.1:8080/barrage/init 這是鏈接後臺的固定寫法

ws爲前綴, 127.0.0.1爲ip地址 8080爲tomcat提供的服務端口 barrage爲項目名稱

init 爲後臺對應的@ServerEndpoint("/init")

var socket = new WebSocket("ws://127.0.0.1:8080/barrage/init");$(function() {listen();})function emit() {var text = encodeScript($("#msg").val());var msg = {"message" : text,"color" : "#CECECE","bubbleColor" : "#2E2E2E","fontSize" : "12","fontType" : "黑體"};msg = JSON.stringify(msg);socket.send(msg);$("#content").append("<kbd style='color: #" + "CECECE" + ";float: right; font-size: " + 12 + ";'>" + text + "</kbd><br/>");$("#msg").val("");}function listen() {socket.onopen = function() {$("#content").append("<kbd>Welcome!</kbd></br>");};socket.onmessage = function(evt) {var data = JSON.parse(evt.data);$("#content").append("<kbd style='color: #" + data.color + ";font-size: " + data.fontSize + ";margin-top: 10px;'>" + data.userName + " Say: " + data.message + "</kbd></br>");};socket.onclose = function(evt) {$("#content").append("<kbd>" + "Close!" + "</kbd></br>");}socket.onerror = function(evt) {$("#content").append("<kbd>" + "ERROR!" + "</kbd></br>");}}document.onkeydown = function(event){var e = event || window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode == 13){ // enter 鍵emit();}};

接下來是頁面index.html的實現：

<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BarrageClient</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div class="container" style="padding-top:20px;"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Barrage</h3> </div> <div class="panel-body" id="content"></div> </div> <hr/> <input type="text" class="form-control" placeholder="msg" aria-describedby="sizing-addon1" id="msg"> <hr/> <hr/> <button type="button" class="btn btn-lg btn-success btn-block" onclick="emit()">Emit</button> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/core.js"></script> <script type="text/javascript" src="js/index.js"></script> </body></html>

core.js中的encodeScript方法

function encodeScript(data) { if(null == data || "" == data) { return ""; } return data.replace("<", "&lt;").replace(">", "&gt;");}

服務端目錄結構

服務端使用tomcat-websocket-api的jar包實現，主要是client包下面的BarrageClient類

init爲對外提供服務的方法名稱

前臺與後臺創建鏈接後, onOpen方法被調用

前臺與後臺斷開鏈接後, onClose方法被調用

前臺向後臺傳送消息後, onMessage會被調用, message中的數據格式爲JSON

@ServerEndpoint("/init")

public class BarrageClient {

private static Logger LOG = LoggerFactory.getLogger(BarrageClient.class);

@OnOpen

public void onOpen(Session session) {

//加入用戶池

UserPool.add(session);

}

@OnMessage

public void onMessage(String message, Session session) throws IOException {

LOG.info("user [" + session.getId() + "] Received: " + message);

//給全部用戶發送消息

MessageProxy.getInstance().getProxy(Message.class).send(message, session);

}

@OnError

public void onError(Throwable throwable) {

LOG.error(throwable.getMessage());

}

@OnClose

public void onClose(Session session) {

//移除用戶池

UserPool.remove(session.getId());

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。