2013-03-07 144 views
3

我設計類似於谷歌使用SignalR連接文檔實時文檔編輯器的Web應用程序。Connection.Start()()完成SignalR問題

它好的工作也就是當我在瀏覽器中一個編輯在寫,被顯示在其他打開的瀏覽器我有文字。我遇到的唯一問題是,一開始我寫一些文本時,它不會被顯示,然後我再次刪除並重新寫入,並且一切正常。

當調試在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> 

任何想法?

回答

5

您應該只進行一次開始你的SignalR連接,而不是在每一個KEYUP。在開始連接之前,您還應該創建您的客戶端集線器方法:

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

非常感謝!不知道我每次啓動連接都會啓動連接!難怪!當我在tinyMCE中設置粗體或字體大小的文本時,是否碰巧想知道如何讓其他客戶端上的文本發生更改?我認爲這應該與上面的代碼一起工作,因爲它應該用html標籤發送文本。任何想法? – Bernice 2013-03-07 20:28:20