I am designing a real-time document editor web application similar to google docs using SignalR connections.
It is working ok i.e. when I am writing in one editor in a browser, text is being displayed on the other open browsers I have. The only problem I have is that when at first I write some text it is not being displayed, then I delete and write again and everything is ok.
When I debug using F12 in Chrome I am getting this error:
Uncaught Error: SignalR: Connection has not been fully initialized. Use .start().done() or .start().fail() to run logic after the connection has started.
I don't understand this since in my code I am actually using $.connection.hub.start.done(). Here is the hub I am using:
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);
}
}
}
And this is the JavaScript and html associated with this. Please note that I am using tinyMCE as a plug-in for the editor.
@{
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>
Any ideas?
I am designing a real-time document editor web application similar to google docs using SignalR connections.
It is working ok i.e. when I am writing in one editor in a browser, text is being displayed on the other open browsers I have. The only problem I have is that when at first I write some text it is not being displayed, then I delete and write again and everything is ok.
When I debug using F12 in Chrome I am getting this error:
Uncaught Error: SignalR: Connection has not been fully initialized. Use .start().done() or .start().fail() to run logic after the connection has started.
I don't understand this since in my code I am actually using $.connection.hub.start.done(). Here is the hub I am using:
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);
}
}
}
And this is the JavaScript and html associated with this. Please note that I am using tinyMCE as a plug-in for the editor.
@{
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>
Any ideas?
Share Improve this question asked Mar 7, 2013 at 17:18 BerniceBernice 2,59211 gold badges45 silver badges75 bronze badges1 Answer
Reset to default 5You should only be starting your SignalR connection once, not on every keyup. You also should create your client side hub methods before starting the connection:
<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) {
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 () {
ed.onKeyUp.add(function (ed, e) {
var text = tinyMCE.activeEditor.getContent();
hub.server.send(text);
});
});
}
});
});
</script>