SignalR 2 与mvc 5实现实时聊天功能

守听 · 2022-8-11 18:08:19

效果图先附上:

在“添加新项 - SignalRChat”中，选择 InstalledVisual> C#>WebSignalR>，然后选择 SignalR Hub 类 (v2) 。
将类 ChatHub 命名并添加到项目中。
此步骤将创建 ChatHub.cs 类文件，并将一组支持 SignalR 的脚本文件和程序集引用添加到项目中。
将新 ChatHub.cs 类文件中的代码替换为以下代码：
1. using System;
2. using System.Web;
3. using Microsoft.AspNet.SignalR;
4. namespace SignalRChat
5. {
6. public class ChatHub : Hub
7. {
8. public void Send(string name, string message)
9. {
10. // Call the broadcastMessage method to update clients.
11. Clients.All.broadcastMessage(name, message);
12. }
13. }
14. }
复制代码
- 在“添加新项 - SignalRChat”中选择“InstalledVisual> C#>Web”，然后选择“OWIN 启动类”。
- 将类 命名为 Startup 并将其添加到项目中。
- 将 Startup 类中的默认代码替换为以下代码：
- 1. using Microsoft.Owin;
  2. using Owin;
  3. [assembly: OwinStartup(typeof(SignalRChat.Startup))]
  4. namespace SignalRChat
  5. {
  6. public class Startup
  7. {
  8. public void Configuration(IAppBuilder app)
  9. {
  10. // Any connection or hub wire up and configuration should go here
  11. app.MapSignalR();
  12. }
  13. }
  14. }
  复制代码
  将前端视图的样式替换（注意是布局页引用分部页，不是普通的视图）
- View Code

控制器

如果实现了以上效果如图

如果要实现侧边栏展示那么需要把内容替换一下

@{
ViewBag.Title = "Chat";
Layout = "~/Views/Shared/_LayoutChat.cshtml";
}
@using 奈班级学生管理系统.Models;
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<p id="UserName" style="display:none;">@ViewBag.name</p>
<p id="time" style="display:none;">@ViewBag.time</p>
<body>
<canvas class="tsparticles-canvas-el" width="2133" height="1249" style="width: 100%; height: 100%; position: fixed; z-index: -1; top: 0px; left: 0px; background-color: rgb(255, 255, 255); pointer-events: initial;"></canvas>
</body>
<button class="ljjr" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">立即加入</button>
<h3 class="container">在线聊天栏</h3>
<hr style="color:#ccc" />
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<ul id="discussion">
</ul>
<input placeholder="快和在线小伙伴一起交流吧~" type="text" id="message" style="width: 230px; border: 1px solid #000000;height:32px;border-radius:5px;" />
<input type="button" id="sendmessage" value="发送" class="btn" style="background-color: #000000; color: white; width: 22%; height: 32px; border-radius: 4px; " />
<input type="hidden" id="displayname" />
@section scripts {
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
@* *@
}

复制代码

View Code注意有一些路径需要改成自己的

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

		自动登录	找回密码
密码			立即注册

0 个回复