WebForm SignalR 实时消息推送
作者:互联网
原文:https://www.jianshu.com/p/ae25d0d77011
实现效果
WebFrom + SignalR 实时消息,聊天室,即时消息
代码示例
动态链接库
添加基础动态链接库
1 Microsoft.AspNet.SignalR.Core.dll 2 Microsoft.AspNet.SignalR.Owin.dll 3 Microsoft.AspNet.SignalR.SystemWeb.dll 4 Microsoft.Owin.Host.SystemWeb.dll 5 Owin.dll 6 Newtonsoft.Json.dll
Global.asax
应用程序文件添加MapHubs
1 public class Global : System.Web.HttpApplication 2 { 3 4 protected void Application_Start(object sender, EventArgs e) 5 { 6 RouteTable.Routes.MapHubs(); 7 } 8 }
继承 Hub
编写集成类
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using Microsoft.AspNet.SignalR; 6 7 /// <summary> 8 /// PushHub 的摘要说明 9 /// </summary> 10 public class PushHub : Hub 11 { 12 public PushHub() 13 { 14 // 15 // TODO: 在此处添加构造函数逻辑 16 // 17 } 18 }
聊天室页面
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChatRoom.aspx.cs" Inherits="WebApp.CustomApp.Message.ChatRoom" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title></title> 9 <!-- 新 Bootstrap 核心 CSS 文件 --> 10 <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> 11 12 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 13 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> 14 15 <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 16 <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 17 18 <script src="../../Plugins/jquery.signalR-1.1.4.js" type="text/javascript"></script> 19 <script src="/Signalr/Hubs"></script> 20 <script> 21 function SendMsg() { 22 var data = { name: $("#txtName").val(), msg: $("#txtMessage").val() }; 23 $.post("ChatRoom.aspx", data, function (msg) { }); 24 } 25 26 var pushHub = $.connection.pushHub; 27 28 pushHub.client.sendMessage = function (name, message, time) { 29 var flag = time + " " + name + " 说:" + message + "\r\n"; 30 $("#txtChatLog").val($("#txtChatLog").val() + flag); 31 } 32 33 $.connection.hub.logging = true; 34 $.connection.hub.start(); 35 </script> 36 37 </head> 38 <body> 39 40 <form> 41 <div class="container"> 42 <div class="row"> 43 <br /> 44 <div class="form-group"> 45 <label for="txtName">用户名</label> 46 <input type="text" class="form-control" id="txtName" placeholder="用户名" /> 47 </div> 48 <div class="form-group"> 49 <label for="txtMessage">消息内容</label> 50 <input type="text" class="form-control" id="txtMessage" placeholder="消息内容" /> 51 </div> 52 <button type="button" class="btn btn-default" onclick="SendMsg()">发送</button> 53 <br /> 54 <div class="form-group"> 55 <label for="txtMessage">聊天记录</label> 56 <textarea id="txtChatLog" class="form-control" cols="100" rows="10"></textarea> 57 </div> 58 59 </div> 60 </div> 61 </form> 62 63 64 </body> 65 </html>
聊天室后台
1 using Microsoft.AspNet.SignalR; 2 using System; 3 using System.Collections.Generic; 4 using System.Linq; 5 using System.Web; 6 using System.Web.UI; 7 using System.Web.UI.WebControls; 8 9 namespace WebApp.CustomApp.Message 10 { 11 public partial class ChatRoom : System.Web.UI.Page 12 { 13 protected void Page_Load(object sender, EventArgs e) 14 { 15 if (!IsPostBack) 16 { 17 if (Request.Form["name"] != null) 18 { 19 SendMsg(Request.Form["name"].ToString(), Request.Form["msg"].ToString()); 20 } 21 } 22 } 23 24 private void SendMsg(string name,string msg) 25 { 26 IHubContext chat = GlobalHost.ConnectionManager.GetHubContext<PushHub>(); 27 chat.Clients.All.sendMessage(name, msg, DateTime.Now.ToString()); 28 } 29 30 } 31 }
注意事项
未生成 /Signalr/Hubs 脚本文件
如果通过浏览器查看时无法浏览 /Signalr/Hubs,可能是 Global.asax 未初始化 RouteTable.Routes.MapHubs();
Global.asax 中 RouteTable.Routes 找不到 MapHubs()
方式一
导入 System.Web.Routing
1 <%@ Import Namespace="System.Web.Routing" %>
方式二
或在 App_Code 文件夹下新建 Global.aspx.cs 文件,同时将原始 Global.aspx 修改如下
<%@ Application Codebehind="App_Code\Global.asax.cs" Inherits="Global" Language="C#" %>
标签:Web,name,Global,System,SignalR,WebForm,using,推送 来源: https://www.cnblogs.com/yanglang/p/11359011.html