SignalR 接続を使用して、Google ドキュメントに似たリアルタイム ドキュメント エディター Web アプリケーションを設計しています。
正常に動作しています。つまり、ブラウザの 1 つのエディタで書いているときに、開いている他のブラウザにテキストが表示されています。私が抱えている唯一の問題は、最初にテキストを書いたときにそれが表示されていないことです。その後、削除してもう一度書き込んで、すべて問題ありません。
Chrome で F12 を使用してデバッグすると、次のエラーが発生します。
Uncaught Error: SignalR: Connection has not been fully initialized. Use .start().done() or .start().fail() to run logic after the connection has started.
私のコードでは実際に $.connection.hub.start.done() を使用しているので、これはわかりません。私が使用しているハブは次のとおりです。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
namespace Write.ly
{
[HubName("editor")]
public class EditorHub : Hub
{
public void Send(string message)
{
Clients.Others.broadcastMessage(message);
}
}
}
これは、これに関連付けられた JavaScript と html です。エディターのプラグインとして tinyMCE を使用していることに注意してください。
@{
ViewBag.Title = "- Editor";
ViewBag.ContentStyle = "/Content/CSS/editor.css";
}
<script src="~/Scripts/jquery.signalR-1.0.1.min.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Content/TinyMCE/tiny_mce.js"></script>
<script type="text/javascript">
$(function () {
var hub = $.connection.editor;
tinyMCE.init({
mode: "textareas",
theme: "advanced",
plugins: "emotions,spellchecker,advhr,insertdatetime,preview",
// Theme options - button# indicated the row# only
theme_advanced_buttons1: "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
theme_advanced_buttons2: "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
setup: function (ed) {
ed.onKeyUp.add(function (ed, e) {
hub.client.broadcastMessage = function (message) {
var bookmark = ed.selection.getBookmark(2, true);
tinyMCE.activeEditor.setContent(message);
ed.selection.moveToBookmark(bookmark);
};
$.connection.hub.start().done(function () {
var text = tinyMCE.activeEditor.getContent();
hub.server.send(text);
});
});
}
});
});
</script>
<form method="post" action="somepage">
<textarea id="editor" name="content" cols="100" rows="30"></textarea>
</form>
<button class="btn" onclick="ajaxSave();"><span>Save</span></button>
何か案は？