javascript Connection.Start().Done() SignalR 问题

Connection.Start().Done() SignalR Issue

提问by Bernice

I am designing a real-time document editor web application similar to google docs using SignalR connections.

我正在设计一个类似于使用 SignalR 连接的谷歌文档的实时文档编辑器 Web 应用程序。

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:

当我在 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. 

I don't understand this since in my code I am actually using $.connection.hub.start.done(). Here is the hub I am using:

我不明白这一点，因为在我的代码中我实际上使用了 $.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);
        }
    }
}

And this is the JavaScript and html associated with this. Please note that I am using tinyMCE as a plug-in for the editor.

这是与此相关的 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>

Any ideas?

有任何想法吗？

回答by halter73

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:

您应该只启动 SignalR 连接一次，而不是每次都启动。您还应该在开始连接之前创建客户端集线器方法：

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