SignalR 2 与mvc 5实现实时聊天功能
效果图先附上:https://img2022.cnblogs.com/blog/2858931/202206/2858931-20220617220146894-313349002.png
首先 这是我是参考 教程：使用 SignalR 2 和 MVC 5 实时聊天 | Microsoft Docs
先附上教程：
https://img2022.cnblogs.com/blog/2858931/202206/2858931-20220617220306931-967511140.png
https://img2022.cnblogs.com/blog/2858931/202206/2858931-20220617220447538-1060629878.png
[*]在“添加新项 - SignalRChat”中，选择 InstalledVisual> C#>WebSignalR>，然后选择 SignalR Hub 类 (v2) 。
[*]将类 ChatHub 命名并添加到项目中。
此步骤将创建 ChatHub.cs 类文件，并将一组支持 SignalR 的脚本文件和程序集引用添加到项目中。
[*]https://img2022.cnblogs.com/blog/2858931/202206/2858931-20220617220700276-1938508.png
[*]将新 ChatHub.cs 类文件中的代码替换为以下代码：
[*]using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Call the broadcastMessage method to update clients.
Clients.All.broadcastMessage(name, message);
}
}
}
[*]在“添加新项 - SignalRChat”中选择“InstalledVisual> C#>Web”，然后选择“OWIN 启动类”。
[*]将类 命名为 Startup 并将其添加到项目中。
[*]https://img2022.cnblogs.com/blog/2858931/202206/2858931-20220617220735084-1596480556.png
[*]将 Startup 类中的默认代码替换为以下代码：
[*]using Microsoft.Owin;
using Owin;
namespace SignalRChat
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// Any connection or hub wire up and configuration should go here
app.MapSignalR();
}
}
}将前端视图的样式替换（注意是布局页 引用分部页，不是普通的视图）
[*]https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifView Code
控制器https://img2022.cnblogs.com/blog/2858931/202206/2858931-20220617221024836-1873053229.png
如果实现了以上 效果如图
https://img2022.cnblogs.com/blog/2858931/202206/2858931-20220617221101298-1825400932.png
如果要实现侧边栏展示 那么需要把内容替换一下
https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttps://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif@{
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注意 有一些路径需要改成自己的
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]