Last active
December 10, 2015 01:34
-
-
Save miso-soup/4359201 to your computer and use it in GitHub Desktop.
knockout.js と SignalR 1.0.0 rc-1 でチャットもどきを実装するときの主なコードです。
参照:http://d.hatena.ne.jp/miso_soup3/20121222/1356190503
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// CommentHub.cs | |
using Microsoft.AspNet.SignalR.Hubs; | |
namespace SignalRChat.Hubs | |
{ | |
public class CommentHub : Hub | |
{ | |
public void NotifyAddComment(String text, String name) | |
{ | |
//Clients.All.addedComment(text, name); | |
Clients.AllExcept(Context.ConnectionId).addedComment(text, name); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Global.asax.cs | |
public class MvcApplication : System.Web.HttpApplication | |
{ | |
protected void Application_Start() | |
{ | |
RouteTable.Routes.MapHubs(); | |
//.... | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Html | |
<label> | |
名前をいれてください。<input type="text" data-bind="value: yourName" /> | |
</label> | |
<ul data-bind="foreach: comments" class="comment-list"> | |
<li> | |
<span data-bind="text: text" class="text"></span> | |
<span data-bind="text: name" class="name text-info"></span> | |
<span data-bind="click: $root.deleteComment" class="delete label">削除</span> | |
</li> | |
</ul> | |
<input type="text" data-bind="value: newCommentText" /> | |
<button data-bind="click: addComment" class="btn">投稿</button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// JavaScript | |
$(function () { | |
function comment(data) { | |
//コメントのモデル | |
this.text = data.text; | |
this.name = data.name; | |
} | |
function viewModel() { | |
var self = this; | |
//コメント | |
self.comments = ko.observableArray([ | |
new comment({ text: "はろー", name: "ジョン" }), | |
new comment({ text: "やっほー", name: "太郎" }) | |
]); | |
//新しく追加したいコメント | |
self.newCommentText = ko.observable(''); | |
//操作している人の名前 | |
self.yourName = ko.observable(''); | |
//コメントを追加します | |
self.addComment = function () { | |
var newComment = new comment({ text: self.newCommentText(), name: self.yourName() }); | |
self.comments.push(newComment); | |
self.newCommentText(''); | |
//★1.コメントを追加した時に、追加したユーザのクライアントからサーバへ、通知する。 | |
commentHub.server.notifyAddComment(newComment.text, newComment.name); | |
} | |
//コメントを削除します | |
self.deleteComment = function (comment) { | |
self.comments.remove(comment); | |
//...本当のチャットにするにはでサーバへ送信する処理が必要 | |
} | |
} | |
var viewModel = new viewModel(); | |
$.connection.hub.start().done(function () { | |
//接続されたら | |
//ViewModelをバインドします。 | |
ko.applyBindings(viewModel); | |
}); | |
//コメントのハブを取得 | |
var commentHub = $.connection.commentHub; | |
commentHub.client.addedComment = function (text, name) { | |
//★3.サーバからコメント追加のお知らせが来たら、クライアント側で画面を反映させる。 | |
//コメントモデルを作成して | |
var newComment = new comment({ text: text, name: name }); | |
//ViewModelへ追加 | |
viewModel.comments.push(newComment); | |
}; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment