머리말
HTML5 WebSocket은 서버와 브라우저 간의 양방향 통신을 구현합니다. 양방향 통신은 서버 메시지 푸시 개발을 더 간단하게 만듭니다. 가장 일반적인 것은 고품질 정보를 실시간으로 필요한 즉각적인 커뮤니케이션 및 응용 프로그램입니다. 이전 서버 메시지 푸시의 대부분은 "폴링"및 "긴 연결"기술을 사용했으며,이 기술은 서버에서 상당한 오버 헤드가 발생했으며 실시간 성능은 특히 높지 않았습니다. WebSocket 기술은 소량의 오버 헤드 만 발생하며 특히 실시간이 높습니다. WebSocket 기술을 사용하여 대화방을 개발하는 방법을 설명해 드리겠습니다. 이 예에서는 TomCAT7 서버가 사용됩니다. 각 서버마다 WebSocket의 구현이 다르 므로이 인스턴스는 Tomcat 서버에서만 실행할 수 있습니다. 그러나 Spring은 각 서버의 구현과 호환되는 WebSocket API를 시작했습니다. 이해하려면 관련 정보를 참조 할 수 있습니다. 여기서 소개하지 않겠습니다. 다음 그림은 채팅방의 렌더링입니다.
이 예에서는 메시지의 실시간 푸시가 구현되며 채팅 사용자의 온라인 및 오프라인 알림도 구현됩니다. 구현 방법에 대해 자세히 설명하겠습니다.
백엔드 처리
Tomcat은 주로 org.apache.catalina.websocket.messageinbound 클래스에 의존하여 WebSocket을 구현합니다. 이 클래스는 {tomcat_home} /lib/catalina.jar에 있으므로 개발할 때 Catalina.jar 및 Tomcat-coyote.jar를 소개해야합니다. 다음 코드는 클라이언트의 서블릿 주소에 노출됩니다.
패키지 com.ibcio; javax.servlet.annotation.webservlet import; import javax.servlet.http.httpservletrequest; import org.apache.catalina.websocket.streaminbound; @webservlet (urlpatterns = { "/message"}) // 브라우저의 ws : // 프로토콜에서 요청을 받으려면 websocketservlet 클래스 공개 클래스 WebSocketMessageserVlet을 구현해야합니다. public static int online_user_count = 1; public String getUser (httpservletrequest request) {return (string) request.getSession (). getAttribute ( "사용자"); } // 일반 서블릿과 달리 CreateWeBSocketInbound를 구현해야하며 사용자 정의 WebSocket 연결 객체는 여기에서 초기화됩니다. }} 이 서블릿은 일반 서블릿과 다소 다릅니다. WebSocketServlet 클래스를 상속하고 CreateWeBsocketInbound 메소드를 무시해야합니다. 이 클래스의 세션의 사용자 속성은 사용자가 index.jsp를 입력하고 현재 사용자의 별명을 기록 할 때 설정됩니다. 다음은 직접 구현 한 WebSocketMessageInbound 클래스의 코드입니다.
패키지 com.ibcio; import java.io.ioexception; import java.nio.bytebuffer; import java.nio.charbuffer; import net.sf.json.jsonobject; import org.apache.catalina.websocket.messageInbound; import org.apache.catalina.websocket.wsoutbound; Public Class WebSocketMessageInbound는 MessageInbound {// 현재 연결의 사용자 이름이 개인 최종 문자열 사용자입니다. public WebSocketMessageInbound (String User) {this.user = user; } public String getUser () {return this.user; } // 연결을 설정하여 트리거 된 이벤트 @override protected void onopen (wsoutbound outbound) {// 연결 이벤트를 트리거하고 연결 풀에서 연결을 추가하고 jsonobject result = new JsonObject (); result.element ( "type", "user_join"); result.element ( "사용자", this.user); // 현재 사용자가 온라인 사용자에게 온라인 상태라는 메시지를 누르십시오 WebSocketMessageInboundPool.SendMessage (result.toString ()); 결과 = 새로운 jsonobject (); result.element ( "type", "get_online_user"); result.element ( "목록", WebSocketMessageInboundPool.getOnLineUser ()); // 연결 풀에 현재 연결 객체를 추가하십시오 WebSocketMessageInboundPool.AddMessageInbound (this); // 현재 온라인 사용자 목록을 현재 연결로 전송합니다 WebSocketMessageInboundPool.SendMessAgetouser (this.user, result.toString ()); } @override protected void onclose (int status) {// 닫기 이벤트를 트리거하고 연결 풀에서 연결을 제거합니다 WebSocketMessageInboundPool.RemoveMessageInbound (this); jsonobject result = new jsonobject (); result.element ( "type", "user_leave"); result.element ( "사용자", this.user); // 현재 사용자가 WebSocketMessageInboundPool.sendMessage를 종료한다는 온라인 사용자에게 메시지를 보냅니다 (result.toString ()); } @override protected void onbinaryMessage (ByteBuffer 메시지) IoException {throw new unsupportedOperationException ( "이진 메시지가 지원되지 않음"); } // 클라이언트가 서버 @override protected void void ontextMessage (charBuffer message)에 메시지를 보낼 때 이벤트가 트리거됩니다. 모든 온라인 사용자에게 메시지 보내기 webSocketMessageInboundPool.SendMessage (message.toString ()); }} 이 코드는 주로 Onopen, OnClose 및 OnTextMessage 메소드를 구현하여 사용자의 온라인, 오프라인 및 메시지를 각각 처리합니다. 이 클래스에는 WebSocketMessageInboundpool Connection Pool 클래스가 있습니다. 이 클래스는 현재 온라인 사용자의 연결을 관리하는 데 사용됩니다. 다음은이 클래스의 코드입니다.
패키지 com.ibcio; import java.io.ioexception; import java.nio.charbuffer; java.util.hashmap import; java.util.map import; java.util.set import; 공개 클래스 WebSocketMessageInboundPool {// 연결 용 맵 컨테이너 저장 비공개 정적 최종 맵 <String, WebSocketMessageInbound> Connections = new Hashmap <String, WebSocketMessageInbound> (); // 연결 풀에 연결 추가 공개 정적 void AddMessageInbound (WebSocketMessageInbound Inbound) {// 연결 시스템 추가. connections.put (inbound.getUser (), 인바운드); } // 모든 온라인 사용자 가져 오기 공개 static set <string> getOnlineUser () {return connections.keyset (); } public static void removeMessageInbound (WebSocketMessageInbound Inbound) {// Connection System.out.println을 제거합니다 ( "user :" + inbound.getUser () + "exit .."); connections.remove (inbound.getUser ()); } public static void sendMessAgetouser (문자열 사용자, 문자열 메시지) {try {// 특정 사용자 system.out.out.println으로 데이터를 보냅니다. WebSocketMessageInbound Inbound = Connections.get (사용자); if (inbound! = null) {inbound.getwsoutBound (). writeTextMessage (charBuffer.wrap (메시지)); }} catch (ioexception e) {e.printstacktrace (); }} // 모든 사용자에게 메시지 보내기 공개 static void sendMessage (문자열 메시지) {try {set <string> keyset = connections.keyset (); for (문자열 키 : Keyset) {WebSocketMessageInbound Inbound = Connections.get (키); if (inbound! = null) {System.out.println ( "사용자에게 메시지 보내기 :" + key + ", 메시지 내용 :" + message); inbound.getwsoutBound (). writeTextMessage (charBuffer.wrap (메시지)); }}} catch (ioexception e) {e.printstacktrace (); }}} 프론트 데스크 디스플레이
위의 코드는 채팅방 백엔드의 코드로 주로 3 개의 객체, 서블릿, 연결 객체 및 연결 풀로 구성됩니다. 다음은 프론트 데스크 코드입니다. 프론트 데스크의 코드는 주로 서버와의 연결을 구현하고 사용자 목록 및 정보 목록을 표시합니다. 프론트 데스크의 디스플레이는 Ext 프레임 워크를 사용합니다. Ext에 익숙하지 않은 학생들은 Ext에 대한 예비 이해를 가질 수 있습니다. 다음은 index.jsp 코드입니다.
<%@ page language = "java"pageencoding = "utf-8"import = "com.ibcio.websocketmessageservlet"%> <%string user = (string) session.getAttribute ( "user"); if (user == null) {// user user = "guest" + websocketmessageservlet.online_user_count의 별명을 생성합니다. WebSocketMessageServlet.online_user_count ++; session.setattribute ( "사용자", 사용자); } pageContext.setAttribute ( "사용자", 사용자); %> <html> <head> <title> Websocket 채팅방 </title> <!-CSS 파일을 소개합니다-> <링크 rel = "스타일 시트"유형 = "text/css"href = "ext4/resources/css/ext-all.css"> <link rel = "stylesheet"= "text/css" rel = "Stylesheet"type = "text/css"href = "css/websocket.css"/> <!- 입력 Ext의 JS 개발 패키지 및 자체 구현 된 WebScoket. -> <script type = "text/javaScript"src = "ext4/ext-all-debug.js"> </script> <script type = "text/javaScript"src = "webSocket.js"> </script> <script type = "text/javascript"> var user = "$ {user}"; </script> </head> <h1> WebSocket 채팅 룸 </h1> <p> HTML5 표준이 제공하는 API는 ext Rich 클라이언트 프레임 워크와 결합되어 다음 특성을 갖습니다. 의사 소통은 폴링 및 긴 연결과 같은 기술과는 다른 커뮤니케이션 및 서버 리소스를 저장 </li> <li> 페이지 디스플레이를 위해 ext와 결합 </li> <li> 사용자 온라인 및 오프라인 알림 </li> </ul> <div id = "webSocket_button"> </div> </body> </html> 페이지 표시는 주로 WebSocket.js에서 제어됩니다. 다음은 WebSocket.jsd 코드입니다.
// 사용자의 채팅 정보 ext.define ( 'messagecontainer', {extend : 'ext.view.view', 추적 : true, multiSelect : false, itemcls : 'l-im-message', ItemSelector : 'div.l-im-message', overitemcls : 'l-message-over', selectioned ','l-im-message-over ' {오버 플로우 : 'auto', backgroundcolor : '#fff'}, tpr : [ '<div> 대화 중에 송금, 정보를 얻지 못합니다. '<div> {content} </div>', '</div>', '</tpl>'], 메시지 : [], initcomponent : function () {var me = me.messagemodel = ext.define ( 'leetop.im.messagemodel', {ext.model ', floom' 'source']}; me.store = ext.create ( 'ext.data.store', 'leetop.im.messagemodel', me.callparent (); 메시지 [ 'timestamp'] = ext.date.format (새 날짜 (메시지 [ 'timestamp']), 'h : i : s'); if (message.from == user) {message.source = 'self'; } else {message.source = '원격'; } me.store.add (메시지); if (me.el.dom) {me.el.dom.scrolltop = me.el.dom.scrollheight; }}}); 이 코드는 주로 메시지를 표시하는 컨테이너를 구현합니다. 다음은 페이지가로드 된 후 실행을 시작하는 코드입니다.
ext.onready (function () {// 사용자 입력 상자 생성 var var input = ext.create ( 'ext.form.field.htmleditor', {region : 'south', height : 120, enablefont : false, enablesourceed : false, enablealignments : {initialize : {ext.eventmanager.on (me.inget.on) (e) {e.preventDefault () {); ext.create ( 'ext.panel.panel', {지역 : '센터', 레이아웃 : '국경', 항목 : [입력, 출력], 버튼 : [{text : 'send', send}}; webSocket ( 'ws : // localhost : 8080/webSocket/message'); } webSocket.onClose = function () {// 연결이 끊어진 win.setTitle (title + '(disterned)'); } // 메시지 리셉션 WebSocket.onMessage = function (message) {var message = json.parse (message.data); // 사용자가 보낸 메시지를 수신합니다. } else if (message.type == 'get_online_user') {// 온라인 사용자 목록 var root = onlineuser.getRootNode (); ext.each (omess.list, function (user) {var node = root.createnode ({id : user, text : user, iconcls : 'user', leaf : true}); root.appendChild (node);}); } else if (message.type == 'user_join') {// 사용자가 온라인으로 이동합니다 var root = onlineuser.getRootNode (); var user = message.user; var node = root.createNode ({id : user, text : user, iconcls : 'user', leaf : true}); root.appendChild (노드); } else if (message.type == 'user_leave') {// 사용자가 오프라인으로 이동 var root = onlineuser.getRootNode (); var user = message.user; var node = root.FindChild ( 'id', user); 루트 .removeChild (노드); }}}}}; // 온라인 사용자 트리 var onlineuser = ext.create ( 'ext.tree.panel', {title : 'online', rootvisible : false, region : 'east', width : 150, lines : false, usearrows : true, autoScroll : true, split : iconcls : 'user-online', store : ext.create ( 'ext.create.' 사용자 ', 확장 : true, children : []}})}); var title = '환영 :' + 사용자; // 디스플레이 wind var win = ext.create ( 'ext.window.window', {title : title + '(연결되지 않음)', 레이아웃 : '국경', 아이콘 : '사용자-윈', 민 폭 : 650, 민 하이트 : 460, 너비 : 650, animateTARGET : 'webSocket_button', winter : winder : onlineog, evinser : gline, glise, water, aitter : winder : winder, winder : winder : winder, winder : 460 {render : function () {initwebsocket ()}; win.show (); // 메시지를 보내는 메시지 send () {var message = {}; if (websocket! = null) {if (input.getValue ()) {ext.Apply (resight, {ours, ours, content : input.getValue (), timestamp : new date (), gettime (), 'message'}); WebSocket.Send (json.stringify (메시지)); //output.receive(message); input.setValue ( ''); }} else {ext.msg.alert ( 'tip', '당신은 연결이 끊어졌으며 메시지를 보낼 수 없습니다!'); }}}});위의 코드는 페이지가로드 된 후 서버에 자동으로 연결되어 디스플레이 인터페이스를 생성하는 코드입니다.
알아채다
두 가지 점 : 배포가 완료된 후 Tomcat 응용 프로그램 디렉토리의 LIB 디렉토리의 Catalina.jar 및 Tomcat-Coyote.jar를 삭제해야합니다. 예를 들어, 프로젝트의 lib 디렉토리는 d :/workspace/websocket/webroot/web-inf/lib이며, 배포 된 응용 프로그램 lib 디렉토리는 d : /tools/apache-tomcat-7.0.32/webapps/webapps/web-inf/lib입니다. 배포 디렉토리의 LIB 디렉토리를 삭제하고 두 개의 항아리를 연결하십시오. 그렇지 않으면 오류가 초기화되지 않을 수 있습니다. 기억하다.
연결이 여전히 불가능한 경우 최신 Tomcat을 다운로드하십시오. TomcatcreateWebsocketInbound의 버전에는 요청 매개 변수가 없음을 잊어 버렸습니다. 현재 코드에는이 매개 변수가 있습니다. 7.0.3xx 버전에는 모두이 매개 변수와 함께 제공됩니다.
요약
WebSocket을 사용하여 서버 푸시를 개발하는 것은 매우 편리합니다. 이것은 간단한 응용 프로그램입니다. 실제로 WebRTC를 결합하여 화상 채팅과 음성 채팅을 실현할 수도 있습니다.
예제 다운로드
주소 다운로드 : 데모
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.