ASP.NET + SignalRで作成されているチャットアプリであるJabbR( https://jabbr.net/ )のソースコードを確認した。
ソースは ここから
タイトルにもある通り、クライアントサイドについてのメモを記す。
*.cshtml
ビューエンジンはRazorを使用。
jQuery.tmpl.js を多用していて正直読む気がしなかった。
ちゃんと見れば理解できるのでしょうが、今回はパス。
Chat.ui.js
JabbRはUIに関係する処理を一つのuiオブジェクトにまとめている。
また、独自のUI操作イベントを定義し、外部との処理連携もできるように設計されている。
Chat.ui.js
(function($, window, document, ...){
//コンポーネント毎のjQueryオブジェクト変数定義
var $chatArea = null,
$tabs = null,
....;
//UI操作毎のメソッドをまとめたオブジェクト
var ui = {
events : {
//独自イベント名の定義
closeRoom: 'jabbr.ui.closeRoom',
prevMessage: 'jabbr.ui.prevMessage',
...
},
initialize : function(){
//UI要素のイベントバインドなど
},
run : function(){
//URLからアクセスした部屋を判断し、UI表示を開始
},
setMessage : function(value){
//メッセージセット
},
...
};
window.chat.ui = ui;
})(window.jQuery, window, window.document, ...)
Chat.js
SignalRハブのクライアントメソッド定義や、
UIオブジェクトの各イベントに対応するイベントハンドラーをバインドするなどしている。
イベントハンドラーについて、具体的には、
イベントハンドラ内でさらに別のUI操作を行う。
UI操作に対応するSignalRサーバーメソッド呼び出しを行う。
のようなことを行っていた。
Chat.js
(function ($, connection, window, ui, utility) {
//変数定義
var chat = connection.chat, $ui = $(ui), ...
//ハブのクライアントメソッド
chat.client.joinRoom = function (room) {...};
chat.client.logOn = function (rooms, myRooms, userPreferences) {...};
...
//UI操作に対するイベント処理
$ui.bind(ui.events.fileUploaded, function (ev, uploader) {...};
$ui.bind(ui.events.sendMessage, function (ev, msg, msgId, isCommand) {
...
//ハブのサーバーメソッド呼び出し
chat.server.send(clientMessage);
...
};
...
})(window.jQuery, window.jQuery.connection, window, window.chat.ui, window.chat.utility);