Прежде чем представить основной текст, позвольте мне представить вам фон и принципы WebSocket:
фон
Только одностороннее общение может быть достигнуто с помощью HTTP в браузере. Комета может в определенной степени моделировать двустороннюю связь, но она имеет низкую эффективность и требует хорошей поддержки от сервера; Сокет и XMLSocket во Flash могут реализовать истинную двустороннюю связь, и эти две функции могут использоваться в JavaScript через Flex Ajax Bridge. Может быть предсказуемо, что если WebSocket будет реализован в браузере, он заменит две вышеупомянутые технологии и будет широко использоваться. Столкнувшись с этой ситуацией, HTML5 определяет протокол WebSocket, который может лучше сохранить ресурсы сервера и пропускную способность и достичь связи в реальном времени.
Протокол WebSocket также реализован в Javaee7.
принцип
Протокол WebSocket.
В настоящее время, чтобы реализовать мгновенное общение, многие веб -сайты используют опросы. Опрос должен отправить HTTP -запрос на сервер в определенном интервале времени (например, каждые 1 секунду), а сервер возвращает последние данные в браузер клиента. Этот традиционный HTTP -образец приносит очевидные недостатки. Браузер должен постоянно делать запросы на сервер. Тем не менее, заголовок HTTP -запроса очень длинный, и полезные данные, содержащиеся в нем
Эффект более новой технологии для проведения опроса заключается в том, что Comet использует Ajax. Однако, хотя эта технология может достичь полной общения, она все равно требует запроса.
В API WebSocket Browser и сервера должны только пожать руку, а затем быстрого канала между браузером и сервером формируется быстрый канал. Данные могут передаваться непосредственно между двумя. В этом протоколе WebSocket у нас есть два основных преимущества для реализации мгновенного обслуживания:
1. Заголовок
Заголовок, который общается друг с другом, очень маленький - вероятно, только 2 байта
2. Server Push
При наталкивании сервера сервер больше не пассивно получает запрос браузера перед возвратом данных, но активно подталкивает его к браузеру, когда доступны новые данные.
1. Введение проекта
WebSocket - это новый протокол в HTML5. Он реализует полную дуплексную связь между браузером и сервером. Здесь WebSocket будет использоваться для разработки комнат веб -чата. Фронт-эндондр Framework будет использовать Amazeui, Java на заднем плане и Umeditor в редакторе.
2. включение знаний.
Веб-фронт (HTML+CSS+JS) и Java
3. Программная среда Tomcat 7 JDK 7 Eclipse Javaee Modern Browser
4. Эффект скриншот
Эффект 1
Эффект 2
5. Практический боевой бой проекта
1. Создать новый проект
Откройте Eclipse Javaee, создайте новый динамический веб-проект с именем CHAT, а затем импортируйте пакеты, необходимые для обработки строк формата JSON, Place Commons-Beanutils -1.8.0.jar, Commons-Collections-3.2.1.jar, Commons-Lang-2.5.jar, Commons-logging-1.jar, ezmorph-1.0.6.jar и json-logging-1.1.jar, ezmorph-1.0.jar. Пакеты размещаются в каталоге WebContent/Web-Inf/LIB и, наконец, публикуют проект на сервере Tomcat. На этом этапе пустой проект завершен.
2. Напишите линейную страницу
Создайте новую страницу с именем index.jsp в каталоге WebContent. Структура Amazeui используется здесь. Это адаптивная фронтальная фронтальная структура поперечного экрана. В окне «Ввод сообщений» используется Umeditor, который представляет собой богатый текстовый онлайн -редактор, который может сделать наше содержимое сообщения красочным.
Во -первых, загрузите сжатый пакет с официального веб -сайта Amazeui, а затем расстегните распад папку Assets и скопируйте каталог веб -контента, чтобы мы могли использовать Amazeui.
Затем загрузите мини-версию пакета сжатия версий JSP с официального веб-сайта Uediter, распаковать весь каталог в каталог Web-Content, а затем вы можете написать код фронта, код заключается в следующем (вы можете написать его в соответствии с вашими предпочтениями):
<%@ page language = "java" contentType = "text/html; charset = utf-8" pageencoding = "utf-8"%> <! doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <meta http-eaviv = "x-u-compatible" utf-8 " name = "viewport" content = "width = width Device, начальная шкала = 1, максимальная шкала = 1, пользовательский scalbable = no"> <Title> Shiyanlou Chat </title> <!-SET Render Engine для 360 браузера-> <meta name = "renderer" Content = "webkit"> <!-No Baidu SeateAppp-> <meta ht-equivtrtry = "conlertrytrytrytrytrytrtr content = "no-siteapp"/> <link rel = "Альтернативный значок" href = "assets/i/favicon.ico"> <link rel = "styleSheet" href = "Assets/css/amaeui.min.css"> <link rel = "stylesheet" href = "assets/css/app.css" href = "umeditor/themes/default/css/umeditor.css" rel = "stylesheet"> <style> .title {text-align: center;}. CHAT-content-container {height: 29Rem; Overflow-y: прокрутка; border: 1px solid silver;}</style></head><body> <!-- title start --> <div> <div> <div> <div> <h1>ShiYanLou Chat</h1> </div> </div> </div> </div> <!-- title end --> <div> <div> <ul id="message-list"></ul> </div> </div> </div> </div> <!-- chat Запуск содержимого-> <!-Ввод сообщений начал-> <div> <div> <form> <div> <script type = "text/plain" id = "myeditor"> </script> </div> </form> </div> </div> <div> <div> <div> <div> <div> <div id = inpute nickNam type = "text" Placeholder = "Пожалуйста, введите Nickname"/> </div> </div> <div> <script src = "Assets/js/jquery.min.js"> </script> <!-<! src = "http://libs.baidu.com/jquery/1.11.1/jquery.min.js"> </script> <!-<!-<!-[if lte ie 8]> <script src = "http:///libs.baidu.com/jquery/1.11.1/jquery.min.min. <!-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'); // Сделать коробку с псевдонимом получить фокусировку $ ('#псевдоним') [0] .focus (); }); </script> </body> </html>После написания запустите сервер Tomcat, а затем посетите http: // localhost: 8080/chat/index.jsp, и вы увидите следующий интерфейс.
3. Напишите фоновый код
Создайте новый пакет com.shiyanlou.chat, создайте класс под названием Chatserver в пакете. API WebSocket был объединен с Javaee 7. Поэтому, независимо от того, какой он сервер, код, написанный на Java, такой же, и код выглядит следующим образом:
Пакет com.shiyanlou.chat; import java.text.simpledateformat; import java.util.date; импорт javax.websocket.onclose; импорт javax.websocket.onerror; импорт javax.websocket.session; импорт javax.websocket.onopen; import javax.websocket.session; javax.websocket.server.ServerEndpoint;import net.sf.json.JSONObject;/** * Chat Server Class* @author shiyanlou * */@ServerEndpoint("/websocket")public class ChatServer { private static final SimpleDateFormat DATE_FORMAT = new SimpleDateFormat("yyyy-MM-dd HH:mm");// Date formatting @OnOpen public void open(Session session) { // Add initialization operation} /** * Accept the client's message and send the message to all connected sessions* @param message Message from the client* @param session The client's session*/ @OnMessage public void getMessage(String message, Session session) { // parse the client's message into a JSON object JSONObject jsonObject = JSONObject.fromObject(message); // Добавить дату отправки в сообщение jsonObject.put ("date", date_format.format (new Date ())); // Отправить сообщение на все подключенные сеансы для (сеанс открыта: session.getopensessions ()) {// Добавить флаги того, является ли это сообщение самому текущему сеансу jsonobject.put («is self», opensession.equals (session)); // Отправить json-форматированное сообщение Opensession.getAsyncremote (). SendText (jsonObject.toString ()); }} @Onclose public void clod () {// Добавить операцию при закрытии сеанса} @onerror public void error (throwable t) {// Добавить операцию для обработки ошибки}}4. Взаимодействие спереди и за кулисами
После написания фона на стойке регистрации необходимо использовать WebSocket для подключения к фону. Вам необходимо создать новый объект WebSocket, а затем вы можете взаимодействовать с сервером, отправлять сообщения из браузера на сервер и в то же время проверить, пустым ли содержимое окна ввода, а затем принимайте сообщения, отправленные сервером, динамически добавить их в поле содержимого чата,
var um = um.geteditor ('myeditor'); $ ('#chicname') [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'). On ('click', function () {var nickname = $ ('#nickname'). Val (); if (! Um.hascontents ()) {// Определить, является ли окно ввода сообщения // ввод сообщений получает фокусировку um.focus (); // adtice effect $ ('. Edui-container'). SetTimeout ("$ ('. Edui-Container'). RemoveClass ('am-animation-shake')", 1000); $ ('#input-nickname'). AddClass ('Am-Animation-Shake'); Очистить сообщение ввода ввода Um.setContent (''); // Добавить сообщение в функцию содержимого чата addMessage (message) {message = json.parse (message); var messageitem = '<li>' + '<a href = "javascript: void (0)"> <img src = "Assets/Images/' + (Message.isself? message.nickname + '</a> <time>' + message.date + '</time> </div> </header>' + '<div>' + message.content + '</div> </div> </li>'; $ (messageitem) .appendto ('#list'); // Прокрутите полос прокрутки до нижней $ (". CHAT-Content-Container"). Scrolltop ($ (". CHAT-Content-Container") [0] .scrollheight); }На этом этапе простая комната веб -чата завершена. Вы можете открыть еще несколько окон или пригласить друзей тестировать вместе на локальной сети.
6. Резюме
Этот класс проекта использует WebSocket для реализации простой комнаты для веб -чата. На самом деле, WebSocket может быть применен не только к браузеру, но и к клиентам настольных компьютеров.
7. Мыслительные вопросы
Этот класс проекта - просто простая реализация чата. На самом деле, есть много функций, которые могут быть добавлены, такие как функция загрузки аватара, функция чата один на один и т. Д. Давайте вместе улучшим комнату чата.
Вы хотите попробовать это сразу, если видите это? Нажмите здесь --- Предоставьте вам бесплатную среду онлайн-компиляции, чтобы вам больше не пришлось беспокоиться о создании среды
Выше приведено соответствующие знания об использовании Java и WebSocket для реализации примера примера в веб -чате. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!