快捷導(dǎo)航

使用Java和WebSocket實(shí)現(xiàn)網(wǎng)頁聊天室實(shí)例代碼

更新時(shí)間：2016年06月30日 10:06:38 投稿：mrr

WebSocket是HTML5一種新的協(xié)議，它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，這里就將使用WebSocket來開發(fā)網(wǎng)頁聊天室，對(duì)Java和WebSocket實(shí)現(xiàn)網(wǎng)頁聊天室的實(shí)例代碼感興趣的朋友一起學(xué)習(xí)吧

在沒介紹正文之前，先給大家介紹下websocket的背景和原理：

背景

在瀏覽器中通過http僅能實(shí)現(xiàn)單向的通信,comet可以一定程度上模擬雙向通信,但效率較低,并需要服務(wù)器有較好的支持; flash中的socket和xmlsocket可以實(shí)現(xiàn)真正的雙向通信,通過 flex ajax bridge,可以在javascript中使用這兩項(xiàng)功能. 可以預(yù)見,如果websocket一旦在瀏覽器中得到實(shí)現(xiàn),將會(huì)替代上面兩項(xiàng)技術(shù),得到廣泛的使用.面對(duì)這種狀況，HTML5定義了WebSocket協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬并達(dá)到實(shí)時(shí)通訊。

在JavaEE7中也實(shí)現(xiàn)了WebSocket協(xié)議。

原理

WebSocket protocol 。

現(xiàn)很多網(wǎng)站為了實(shí)現(xiàn)即時(shí)通訊，所用的技術(shù)都是輪詢(polling)。輪詢是在特定的的時(shí)間間隔（如每1秒），由瀏覽器對(duì)服務(wù)器發(fā)出HTTP request，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的HTTP request 的模式帶來很明顯的缺點(diǎn) – 瀏覽器需要不斷的向服務(wù)器發(fā)出請(qǐng)求，然而HTTP request 的header是非常長的，里面包含的有用數(shù)據(jù)可能只是一個(gè)很小的值，這樣會(huì)占用很多的帶寬。

而比較新的技術(shù)去做輪詢的效果是Comet – 用了AJAX。但這種技術(shù)雖然可達(dá)到全雙工通信，但依然需要發(fā)出請(qǐng)求。

在 WebSocket API，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。在此WebSocket 協(xié)議中，為我們實(shí)現(xiàn)即時(shí)服務(wù)帶來了兩大好處：

1. Header

互相溝通的Header是很小的-大概只有 2 Bytes

2. Server Push

服務(wù)器的推送，服務(wù)器不再被動(dòng)的接收到瀏覽器的request之后才返回?cái)?shù)據(jù)，而是在有新數(shù)據(jù)時(shí)就主動(dòng)推送給瀏覽器。

一、項(xiàng)目簡介

WebSocket是HTML5一種新的協(xié)議，它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，這里就將使用WebSocket來開發(fā)網(wǎng)頁聊天室，前端框架會(huì)使用AmazeUI，后臺(tái)使用Java，編輯器使用UMEditor。

二、涉及知識(shí)點(diǎn)

網(wǎng)頁前端（HTML+CSS+JS）和Java

三、軟件環(huán)境 Tomcat 7 JDK 7 Eclipse JavaEE 現(xiàn)代瀏覽器

四、效果截圖

效果1

效果2

五、項(xiàng)目實(shí)戰(zhàn)

1. 新建項(xiàng)目

打開Eclipse JavaEE，新建一個(gè)名為Chat的Dynamic Web Project，然后導(dǎo)入處理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這幾個(gè)包放在WebContent/WEB-INF/lib目錄下，最后把項(xiàng)目發(fā)布到Tomcat服務(wù)器上，到此空項(xiàng)目就搭建完成了。

2. 編寫前端頁面

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

首先從 AmazeUI官網(wǎng) 下載壓縮包，然后解壓把a(bǔ)ssets文件夾拷貝到WebContent目錄下，這樣我們就能使用AmazeUI了。

再從 UEditer官網(wǎng) 下載Mini版的JSP版本壓縮包，解壓后把整個(gè)目錄拷貝到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 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');
   // 使昵稱框獲取焦點(diǎn)
   $('#nickname')[0].focus();
  });
 </script>
</body>
</html>

編寫完成之后啟動(dòng)Tomcat服務(wù)器，然后訪問 http://localhost:8080/Chat/index.jsp ，會(huì)看到如下界面。

3. 編寫后臺(tái)代碼

新建一個(gè)com.shiyanlou.chat的包，在包中創(chuàng)建一個(gè)名為ChatServer的類，從JavaEE 7開始就統(tǒng)一了WebSocket的API，因此無論是什么服務(wù)器，用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;
/**
 * 聊天服務(wù)器類
 * @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) {
  // 添加初始化操作
 }
 /**
  * 接受客戶端的消息，并把消息發(fā)送給所有連接的會(huì)話
  * @param message 客戶端發(fā)來的消息
  * @param session 客戶端的會(huì)話
  */
 @OnMessage
 public void getMessage(String message, Session session) {
  // 把客戶端的消息解析為JSON對(duì)象
  JSONObject jsonObject = JSONObject.fromObject(message);
  // 在消息中添加發(fā)送日期
  jsonObject.put("date", DATE_FORMAT.format(new Date()));
  // 把消息發(fā)送給所有連接的會(huì)話
  for (Session openSession : session.getOpenSessions()) {
   // 添加本條消息是否為當(dāng)前會(huì)話本身發(fā)的標(biāo)志
   jsonObject.put("isSelf", openSession.equals(session));
   // 發(fā)送JSON格式的消息
   openSession.getAsyncRemote().sendText(jsonObject.toString());
  }
 }
 @OnClose
 public void close() {
  // 添加關(guān)閉會(huì)話時(shí)的操作
 }
 @OnError
 public void error(Throwable t) {
  // 添加處理錯(cuò)誤的操作
 }
}

4. 前后臺(tái)交互

后臺(tái)寫完了，前臺(tái)要用WebSocket連接后臺(tái)，需要新建一個(gè)WebSocket對(duì)象，然后就可以和服務(wù)器端進(jìn)行交互，從瀏覽器發(fā)送消息給服務(wù)器端，同時(shí)要驗(yàn)證輸入框的內(nèi)容是否為空，然后接受服務(wù)端發(fā)送的消息，把它們動(dòng)態(tài)地添加到聊天內(nèi)容框中，在

var um = UM.getEditor('myEditor');
$('#nickname')[0].focus();
// 新建WebSocket對(duì)象，最后的/websocket對(duì)應(yīng)服務(wù)器端的@ServerEndpoint("/websocket")
var socket = new WebSocket('ws://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${pageContext.request.contextPath}/websocket');
   // 處理服務(wù)器端發(fā)送的數(shù)據(jù)
   socket.onmessage = function(event) {
    addMessage(event.data);
   };
   // 點(diǎn)擊Send按鈕時(shí)的操作
   $('#send').on('click', function() {
    var nickname = $('#nickname').val();
    if (!um.hasContents()) {	// 判斷消息輸入框是否為空
     // 消息輸入框獲取焦點(diǎn)
     um.focus();
     // 添加抖動(dòng)效果
     $('.edui-container').addClass('am-animation-shake');
     setTimeout("$('.edui-container').removeClass('am-animation-shake')", 1000);
    } else if (nickname == '') {	// 判斷昵稱框是否為空
     //昵稱框獲取焦點(diǎn)
     $('#nickname')[0].focus();
     // 添加抖動(dòng)效果
     $('#message-input-nickname').addClass('am-animation-shake');
     setTimeout("$('#message-input-nickname').removeClass('am-animation-shake')", 1000);
    } else {
     // 發(fā)送消息
     socket.send(JSON.stringify({
      content : um.getContent(),
      nickname : nickname
     }));
     // 清空消息輸入框
     um.setContent('');
     // 消息輸入框獲取焦點(diǎn)
     um.focus();
    }
   });
   // 把消息添加到聊天內(nèi)容中
   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');
    // 把滾動(dòng)條滾動(dòng)到底部
    $(".chat-content-container").scrollTop($(".chat-content-container")[0].scrollHeight);
   }

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

六、小結(jié)

本次項(xiàng)目課使用WebSocket實(shí)現(xiàn)了簡單的網(wǎng)頁聊天室，其實(shí)WebSocket不僅可以應(yīng)用于瀏覽器，也可以應(yīng)用于桌面客戶端。

七、思考題

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

看到這里想不想馬上去試試，點(diǎn)擊這里--- 為你免費(fèi)提供在線編譯環(huán)境，讓你不再為搭建環(huán)境而煩惱

以上所述是小編給大家介紹的使用Java和WebSocket實(shí)現(xiàn)網(wǎng)頁聊天室實(shí)例代碼的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: