vs2010 使用SignalR 提升B2C商城用戶體驗（二）

vs2010 使用SignalR 提升B2C商城用戶體驗（二）

　　上一節，已經實現了，當前域內的通訊，這一節中，介紹一下跨域的即時通訊，既然要作，咱們確定要把這個推送及聊天服務器作爲一個單獨的服務器，以方便擴展使用，這樣就要使用跨域技術，既然基於ajax，那麼跨域確定是基於jsonp，下面咱們介紹一下跨域的基本配置：

一、服務器的配置，咱們打開項目中的Global.asax，在Application_Start中作以下配置：

 1 protected void Application_Start()
 2         {
 3             var config = new HubConfiguration();
 4             config.EnableCrossDomain = true;
 5             RouteTable.Routes.MapHubs(config);
 6             AreaRegistration.RegisterAllAreas();
 7 
 8             WebApiConfig.Register(GlobalConfiguration.Configuration);
 9             FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
10             RouteConfig.RegisterRoutes(RouteTable.Routes);
11             
12         }

 

config.EnableCrossDomain = true;

　　這句代碼，就指定了當前的全部集線器均可以跨域進行使用。

　　二、web端配置，咱們新建一個項目，而後添加一個html頁面，msg.html，添加header部分：

1 <script src="/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
2      <script src="/Scripts/json2.js" type="text/javascript"></script>
3     <script src="/Scripts/jquery.signalR-1.0.1.min.js" type="text/javascript"></script>
4     <script src="http://localhost:2154/signalr/hubs" type="text/javascript"></script>

　　http://localhost:2154/signalr/hubs 就是咱們推送服務器的地址了，若是真正上線了，確定使用推送服務器的域名地址，如：push.xxx.com,而後咱們來寫js方法，html部分基本一致：

<script type="text/javascript">

        $(function () {

            $.connection.hub.url = "http://localhost:2154/signalr";
            // Proxy created on the fly
            var chat = $.connection.pushHub;
            // Declare a function on the chat hub so the server can invoke it
            chat.client.addMessage = function (message) {
                writeEvent('<b>ny</b> 對你們說: ' + message, 'event-message');
            };

            $("#broadcast").click(function () {
                // Call the chat method on the server
                chat.server.send($('#msg').val())
                            .done(function () {
                                console.log('Sent message success!');
                            })
                            .fail(function (e) {
                                console.warn(e);
                            });
            });

                        // Start the connection

                        $.connection.hub.start({ xdomain: true});

            //A function to write events to the page
            function writeEvent(eventLog, logClass) {
                var now = new Date();
                var nowStr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
                $('#messages').prepend('<li class="' + logClass + '"><b>' + nowStr + '</b> ' + eventLog + '.</li>');
            }
        });
</script>

　　一、首先要指定hub根地址：$.connection.hub.url = "http://localhost:2154/signalr";

　　二、啓動鏈接時，添加跨域參數： $.connection.hub.start({ xdomain: true});

　　很簡單，如今配置已經完成了，咱們來啓動瀏覽器測試一下：

　　

　　能夠看到，2個web服務器之間已經實現了互通，並且咱們指定使用ie7，說明兼容性是很好的，xp都淘汰了ie6咱也就不測了: )。

　　接下來咱們要作什麼，找個ui設計師，把咱們站點的聊天窗口美化一下，作個iframe，在右下角，點擊，既出現咱們的聊天界面，而後和其餘客戶端的用戶還有咱們的客服人員進行聊天，是否是很贊，

要開飯了，明天咱們繼續介紹客戶端鏈接SignalR，以實現商家客戶端和用戶直接通訊。