본문을 소개하기 전에 WebSocket의 배경과 원리를 소개하겠습니다.
배경
브라우저의 HTTP를 통해 일방 통신 만 달성 할 수 있습니다. 혜성은 양방향 통신을 어느 정도까지 시뮬레이션 할 수 있지만 효율성은 낮으며 서버의 지원이 필요합니다. 플래시의 소켓 및 XMLSocket은 실제 양방향 통신을 실현할 수 있으며이 두 기능은 Flex Ajax 브리지를 통해 JavaScript에서 사용할 수 있습니다. 브라우저에서 WebSocket이 구현되면 위의 두 기술을 대체하고 널리 사용될 것입니다. 이러한 상황에 직면하여 HTML5는 서버 리소스와 대역폭을 더 잘 저장하고 실시간 통신을 달성 할 수있는 WebSocket 프로토콜을 정의합니다.
WebSocket 프로토콜은 Javaee7에서도 구현됩니다.
원칙
WebSocket 프로토콜.
오늘날, 즉각적인 의사 소통을 실현하기 위해 많은 웹 사이트는 폴링을 사용합니다. 폴링은 특정 시간 간격 (예 : 1 초마다)으로 서버에 HTTP 요청을 보내는 것이며 서버는 최신 데이터를 클라이언트 브라우저로 반환합니다. 이 전통적인 HTTP 요청 패턴은 명백한 단점을 가져옵니다. 브라우저는 서버에 지속적으로 요청해야합니다. 그러나 HTTP 요청의 헤더는 매우 길며, 이에 포함 된 유용한 데이터는 작은 값 일 수 있으며, 이는 많은 대역폭을 차지할 수 있습니다.
투표를 수행하는 새로운 기술의 효과는 혜성이 Ajax를 사용한다는 것입니다. 그러나이 기술은 전이중 커뮤니케이션을 달성 할 수 있지만 여전히 요청이 필요합니다.
WebSocket API에서 브라우저와 서버는 악수 만하면 브라우저와 서버 사이에 빠른 채널이 형성됩니다. 데이터는 둘 사이에서 직접 전송 될 수 있습니다. 이 WebSocket 프로토콜에는 인스턴트 서비스 구현에 두 가지 주요 이점이 있습니다.
1. 헤더
서로 통신하는 헤더는 매우 작습니다. 아마 2 바이트 만
2. 서버 푸시
서버를 푸시 할 때 서버는 더 이상 데이터를 반환하기 전에 브라우저의 요청을 수동적으로 수신하지 않지만 새 데이터를 사용할 수있을 때 브라우저로 적극적으로 푸시합니다.
1. 프로젝트 소개
WebSocket은 HTML5의 새로운 프로토콜입니다. 브라우저와 서버 간의 전체 이중 통신을 구현합니다. 여기에서 WebSocket은 웹 대화방을 개발하는 데 사용됩니다. 프론트 엔드 프레임 워크는 백그라운드에서 Amazeui, Java 및 Editor에서 Umeditor를 사용합니다.
2. 지식 포인트 포함
웹 프론트 엔드 (HTML+CSS+JS) 및 Java
3. 소프트웨어 환경 Tomcat 7 JDK 7 Eclipse Javaee Modern Browser
4. 효과 스크린 샷
효과 1
효과 2
5. 프로젝트 실용 전투
1. 새 프로젝트를 만듭니다
Eclipse Javaee를 열고 Chat이라는 새로운 동적 웹 프로젝트를 만들고 JSON 형식 문자열을 처리하는 데 필요한 패키지를 가져오고 Commons-Beanutils-1.8.0.jar, Commons-Collections-3.2.1.jar, Commons-Lang-2.jar, Commons-Logging-1.1.jar, ezmorph-1.0.6.jar 및 Json-Lib-2.4-jar 및 Json-Lib-2.3dk1. 다른 패키지는 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"> 이름 = "viewport"content = "width ="device-width, 초기-스케일 = 1, 최대-스케일 = 1, 사용자 확보 할 수있는 = 1, user-scalable = no "> <title> Shiyanlou Chat </title> <!-360 브라우저의 렌더 엔진 세트-> <meta name ="renderer "content ="webkit "> <!-no baidu siteapp-> 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. href = "umeditor/테마/default/css/umeditor.css"rel = "stylesheet"> <style> .title {text-align : center;}. Chat-Content-Container {height : 29rem; 오버플로-스크롤; 국경 : 1px solid silver;} </style> </head> <body> <!-타이틀 시작-> <div> <div> <div> <div> <h1> Shiyanlou Chat </h1> </div> </div> </div> <!-타이틀 end-> <div> <div> <ul id = "message-list"> </ul> </ul> 컨텐츠 시작-> <!-메시지 입력 시작-> <div> <div> <form> <div> <div> <div> <div> <div> <텍스트/일반 "id ="myEditor "> </script> </div> </div> </div> <div> <div> <div> <div> <div> <div> <message-input-nickname"> <span " type = "text"placeholder = "닉네임을 입력하십시오"/> </div> </div> <div> <script src = "assets/js/jquery.min.js"> </script> <!-<!-[if lte IE 8]> <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.min.min.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> <cript> $ (function () {// 메시지 입력 상자 var um = um.getEditor ( 'myeditor'); // 닉네임 박스를 초점을 얻습니다 $ ( '#nickname') [0] .focus (); }); </script> </body> </html>쓰면 Tomcat 서버를 시작한 다음 http : // localhost : 8080/chat/index.jsp를 방문하면 다음 인터페이스가 표시됩니다.
3. 배경 코드를 작성하십시오
com.shiyanlou.chat의 새 패키지를 만들고 패키지에서 chatserver라는 클래스를 만듭니다. WebSocket API는 Javaee 7 이후 통합되었습니다. 따라서 서버가 무엇인지에 관계없이 Java로 작성된 코드는 동일하며 코드는 다음과 같습니다.
패키지 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.wbsetice.seasion javax.websocket.server.serverendpoint; import net.sf.json.jsonobject;/** * 채팅 서버 클래스 * @author shiyanlou * */ @serverendpoint ( "/websocket") 공개 클래스 chatserver {private static final simpledateformat date_format = new simpledateformat ( "Yyyy-m-dm"; @Onopen public void olop (세션 세션) {// 초기화 추가} / *** 클라이언트의 메시지를 수락하고 클라이언트의 모든 연결된 세션* @param 메시지 메시지를 @param 세션으로 보내는 메시지를 @param session* / @onmessage public void getMessage (string message, session session) {// jsonobject (jsonobjject = jsonobject); // 메시지 jsonObject.put ( "date", date_format.format (new Date ())에서 보내기 날짜를 추가합니다. // (세션 Opensession : session.getOpenSessions ()) {//이 메시지 자체가 현재 세션 자체인지 jsonObject.put ( "isself", opensession.equals (세션)) // JSON- 형식 메시지 OpenSession을 보내십시오 .getAsynCremote (). sendText (jsonObject.toString ()); }} @onclose public void close () {// 세션을 닫을 때 조작을 추가} @Error public void error (trashable t) {// 오류를 처리 할 작업 추가}}4. 전면 및 후진 상호 작용
배경을 작성한 후 프론트 데스크는 WebSocket을 사용하여 배경에 연결해야합니다. 새 WebSocket 객체를 생성 한 다음 서버와 상호 작용하고 브라우저에서 서버로 메시지를 보내고 동시에 입력 상자의 내용이 비어 있는지 확인한 다음 서버에서 전송 된 메시지를 수락하여 채팅 내용 상자에 동적으로 추가 할 수 있습니다.
var um = um.getEditor ( 'myeditor'); $ ( '#nickname') WebSocket ( 'ws : // $ {pagecontext.request.getServerName ()} : $ {pageConText.Request.getServerport ()} $ {pageContext.Request.ContextPath}/WebSocket'); // Server-Side Socket.onMessage = function (event) {addmessage (event.data); }; // action $ ( '#send'). on ( 'click', function () {var nickname = $ ( '#nickname'). val (); if (! um.hascontents ()) {// 메시지 입력 상자가 비어 있는지 여부를 결정합니다. settimeout ( "$ ( '. edui-container'). removeclass ( 'am-animation-shake')", 1000); $ ( '#message-input-nickname'). addClass ( 'am-animation-shake'); // CLEAR 입력 상자 um.setContent ( ''); // 채팅 내용에 메시지 추가 함수 addMessage (메시지) {message = json.parse (메시지); var messageem = '<li>' + '<a href = "javaScript : void (0)"> <img src = "assets/images/' + (messing.isself? message.nickname + '</a> <time>' + message.date + '</time> </div> </header>' + '<div>' + message.content + '</div> </div> </li>'; $ (messageItem) .appendto ( '#message-list'); // 스크롤 바를 하단 $에 스크롤합니다 ( ". 채팅-콘텐츠 컨테이너"). SCROLLTOP ($ ( ". 채팅-콘텐츠 컨테이너") [0] .ScrollHeight); }이 시점에서 간단한 웹 대화방이 완성됩니다. LAN에서 여러 창을 열거 나 친구를 초대 할 수 있습니다.
6. 요약
이 프로젝트 클래스는 WebSocket을 사용하여 간단한 웹 대화방을 구현합니다. 실제로 WebSocket은 브라우저뿐만 아니라 데스크탑 클라이언트에도 적용 할 수 있습니다.
7. 생각 질문
이 프로젝트 클래스는 채팅방의 간단한 구현 일뿐입니다. 실제로, 아바타 업로드 기능, 일대일 채팅 기능 등과 같이 추가 할 수있는 많은 기능이 있습니다. 채팅방을 함께 개선해 봅시다.
이것을 보면 즉시 시도하고 싶습니까? 여기를 클릭하십시오 --- 더 이상 환경 구축에 대해 걱정할 필요가 없도록 무료 온라인 컴파일 환경을 제공합니다.
위의 것은 Java 및 Websocket을 사용하여 웹 채팅룸 예제 코드를 구현하는 것에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!