MVC使用SignalR 提高B2C商城用户体验2
2017-05-19 14:43
357 查看
上一节,已经实现了,当前域内的通信,这一节中,介绍一下跨域的即时通信,既然要做,我们肯定要把这个推送及聊天服务器做为一个单独的服务器,以方便扩展使用,这样就要使用跨域技术,既然基于ajax,那么跨域肯定是基于jsonp,下面我们介绍一下跨域的基本配置:
1、服务器的配置,我们打开项目中的Global.asax,在Application_Start中做如下配置:
这句代码,就指定了当前的所有集线器都可以跨域进行使用。
2、web端配置,我们新建一个项目,然后添加一个html页面,msg.html,添加header部分:
http://localhost:2154/signalr/hubs 就是我们推送服务器的地址了,如果真正上线了,肯定使用推送服务器的域名地址,如:push.xxx.com,然后我们来写js方法,html部分基本一致:
1、首先要指定hub根地址:$.connection.hub.url = "http://localhost:2154/signalr";
2、启动连接时,添加跨域参数: $.connection.hub.start({ xdomain: true});
很简单,现在配置已经完成了,我们来启动浏览器测试一下:
可以看到,2个web服务器之间已经实现了互通,而且我们指定使用ie7,说明兼容性是很好的,xp都淘汰了ie6咱也就不测了: )。
接下来我们要做什么,找个ui设计师,把我们站点的聊天窗口美化一下,做个iframe,在右下角,点击,既出现我们的聊天界面,然后和其他客户端的用户还有我们的客服人员进行聊天,是不是很赞,
1、服务器的配置,我们打开项目中的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 }
2、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>
1、首先要指定hub根地址:$.connection.hub.url = "http://localhost:2154/signalr";
2、启动连接时,添加跨域参数: $.connection.hub.start({ xdomain: true});
很简单,现在配置已经完成了,我们来启动浏览器测试一下:
可以看到,2个web服务器之间已经实现了互通,而且我们指定使用ie7,说明兼容性是很好的,xp都淘汰了ie6咱也就不测了: )。
接下来我们要做什么,找个ui设计师,把我们站点的聊天窗口美化一下,做个iframe,在右下角,点击,既出现我们的聊天界面,然后和其他客户端的用户还有我们的客服人员进行聊天,是不是很赞,
相关文章推荐
- MVC使用SignalR 提高B2C商城用户体验1
- MVC使用SignalR 提高B2C商城用户体验3
- vs2010 使用SignalR 提高B2C商城用户体验(一)
- vs2010 使用SignalR 提高B2C商城用户体验(三)
- vs2010 使用SignalR 提高B2C商城用户体验(二)
- 使用SignalR 提高B2C商城用户体验1
- 使用SignalR 提高B2C商城用户体验1
- 使用e-tag来加快页面加载速度和提高用户体验
- iOS开发中使用UITableView提高用户体验
- Android 使用简单又方便的SharedPreferences让导航页面只进入一次 , 提高用户对app的体验度
- 浅谈电子商务b2c商城中的用户体验
- 使用异步和事件代理提高用户体验(短信群发)
- Asp.NET MVC 使用 SignalR 实现推送功能二(Hubs 在线聊天室 获取保存用户信息)
- 第十七章 提升用户体验 之 使用MVC扩展功能控制程序行为
- ASP.NET MVC使用SignalR统计在线用户人数
- Android使用后台线程提高用户体验
- (13)使用Ajax Helper 提高用户体验
- 使用线程池模拟处理耗时任务,通过websocket提高用户体验
- jquery中beforeSend和complete的使用 --- 提高用户体验&&设置请求头
- 传智播客erp项目学习,使用Ajax提高用户体验效果