Connection.Start().Done() SignalR Issue

问题

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?

回答1:

You 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>

来源：https://stackoverflow.com/questions/15277598/connection-start-done-signalr-issue

标签

javascript

tinymce

signalr