Skip to content

Instantly share code, notes, and snippets.

@miso-soup
Last active December 10, 2015 01:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save miso-soup/4359201 to your computer and use it in GitHub Desktop.
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 
// 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);
}
}
}
// Global.asax.cs
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
RouteTable.Routes.MapHubs();
//....
}
}
// 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>
// 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