Websocket及び、JQueryについての知識が乏しい者ですので、お恥ずかしい質問かもしれませんがお答えいただければ助かります。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<meta charset="utf-8"> 4<title>Chat</title> 5<style> 6.container { 7 width: 600px; 8} 9.box{ 10 overflow:hidden; 11} 12.left { 13 background-color: #D3D3D3; 14 padding: 20px; 15 margin: 5px; 16 width: 300px; 17 float:left; 18 border-radius:10px; 19} 20.right { 21 background-color: #ADFF2F; 22 padding: 20px; 23 margin: 5px; 24 width: 300px; 25 float:right; 26 border-radius:10px; 27} 28</style> 29<script src="http://code.jquery.com/jquery-2.2.4.js"></script> 30<script> 31(function($){ 32 var settings = {}; //変数settingsを空で置く 33 34 var methods = { //ここから変数methodに各methodを代入していく 35 init : function( options ) { 36 settings = $.extend({ 37 'uri' : 'ws://localhost:8080', //URIとは名前または場所を識別する書き方のルールの総称(親玉)。 38 //URLやURNは、URIで定められたルールに従って書かれたり使われたりする。 39 //'key':'値'の関係 40 //ここでは連想配列を作っているのと同じ。 41 'conn' : null, 42 'message' : '#message', 43 'display' : '#display' 44 }, options); 45 $(settings['message']).keypress( methods['checkEvent'] ); 46 //settingsにextendで代入されているmessageの値#messageにキーボード上に反応があった際に、method[checkEvent]を行う 47 //input type text id="message"へのキーボードのアクセスがあった際にcheckEventが発動。 48 $(this).chat('connect'); 49 }, 50 51 52 checkEvent : function ( event ) { //書き込み用のmethod。 53 if (event && event.which == 13) { //13? 54 var message = $(settings['message']).val(); 55 //input type=text id="message"のval()を代入 56 if (message && settings['conn']) { 57 settings['conn'].send(message + ''); 58 //websocketに変数messageを挿入 59 $(this).chat('drawText',message,'right'); 60 //drawTextでhtmlを精製、 61 $(settings['message']).val(''); 62 } 63 } 64 }, 65 66 connect : function () { 67 if (settings['conn'] == null) { 68 settings['conn'] = new WebSocket(settings['uri']); 69 settings['conn'].onopen = methods['onOpen']; 70 settings['conn'].onmessage = methods['onMessage']; 71 settings['conn'].onclose = methods['onClose']; 72 settings['conn'].onerror = methods['onError']; 73 } 74 }, 75 76 onOpen : function ( event ) { 77 $(this).chat('drawText','サーバに接続','left'); 78 }, 79 80 onMessage : function (event) { 81 if (event && event.data) { 82 $(this).chat('drawText',event.data,'left'); 83 } 84 }, 85 86 onError : function(event) { 87 $(this).chat('drawText','エラー発生!','left'); 88 }, 89 90 onClose : function(event) { 91 $(this).chat('drawText','サーバと切断','left'); 92 settings['conn'] = null; 93 setTimeout(methods['connect'], 1000); 94 }, 95 96 drawText : function (message, align='left') { 97 if ( align === 'left' ) { 98 var inner = $('<div class="left"></div>').text(message); 99 } else { 100 var inner = $('<div class="right"></div>').text(message); 101 } 102 var box = $('<div class="box"></div>').html(inner); 103 $('#chat').prepend(box); 104 }, 105 }; // end of methods 106 107 $.fn.chat = function( method ) { 108 if ( methods[method] ) { 109 return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); 110 } else if ( typeof method === 'object' || ! method ) { 111 return methods.init.apply( this, arguments ); 112 } else { 113 $.error( 'Method ' + method + ' does not exist' ); 114 } 115 } // end of function 116})( jQuery ); 117 118$(function() { 119 $(this).chat({ 120 'uri':'ws://localhost:8080', 121 'message' : '#message', 122 'display' : '#chat' 123 }); 124}); 125</script> 126</head> 127<body> 128 <input type="text" id="message" size="50" /> 129 <div id="chat" class="container"></div> 130</body> 131</html> 132
php
1<?php 2use Ratchet\Server\IoServer; 3use Ratchet\Http\HttpServer; 4use Ratchet\WebSocket\WsServer; 5use MyApp\Chat; 6 7 require dirname(__DIR__) . '/vendor/autoload.php'; 8 9 $server = IoServer::factory( 10 new HttpServer( 11 new WsServer( 12 new Chat() 13 ) 14 ), 15 8080 16 ); 17 18 $server->run(); 19
コメントアウトに関しては、一つ一つ整理するために記入しております。
間違い、勘違いなどありましたらご教授いただければ幸いです。
上記2つのファイルはRatchetのマニュアルをそのままコピーして貼り付けたものになります。
htmlファイルのscript内にある$.fn.chatというメソッドがあるのですが、処理の内容が全く理解できず、頭を抱えております。$.fn(JQueryプラグイン)がなぜ記入する必要があるのか?
またchatメソッドがどういう処理をこの場合行なっているのか?
かなり丸投げな質問であることは重々承知しております。
当然一つ一つバラして検索するなどし、理解しようと試みたのですが、やはりchatメソッドの動作が理解できませんでした。引き続き理解に努めるよう努力いたしますが、ヒントなどでも結構ですので皆様の御知恵をお貸しいただければ幸いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/11/14 08:00