实现思路使用postman调用api发送消息并且前端页面能接受到消息。
一、服务端
1 创建api项目这个就不说了
2 引用signalR nuget直接搜signalr 安装上就行
3 后台代码 创建ChatHub类 继承Hub? 注意标记的名称 到时候需要和前端的方法名称要保持一致的
?
?代码：
public class ChatHub:Hub
? ? {
? ? ? ? public async Task Send(string message)
? ? ? ? {
? ? ? ? ? ? if(Clients!=null)
? ? ? ? ? ? await Clients.All.SendAsync("SendAsync", message);
? ? ? ? }
? ? ? ? public override Task OnConnectedAsync()
? ? ? ? {
? ? ? ? ? ? return base.OnConnectedAsync();
? ? ? ? }
? ? ? ? public override Task OnDisconnectedAsync(Exception exception)
? ? ? ? {
? ? ? ? ? ? return base.OnDisconnectedAsync(exception);
? ? ? ? }
? ? ??
? ? }
4 、配置startup跨域问题? 3.1和2.2不一样? 而且3.1比2.2貌似更繁琐
startup? configureservices
services.AddCors(op => { op.AddPolicy("cors", set => { set.SetIsOriginAllowed(origin => true).AllowAnyHeader().AllowAnyMethod().AllowCredentials(); }); });
Configure中? 需要注意一下位置??
自己写一个api调用chathub?
endpoints.MapHub<ChatHub>("api/WeatherForecast/SendMsg");
5 为了方便实现api和前端实现? 写了一个接口
??[Route("api/WeatherForecast/SendMsg")]
? ? ? ? [HttpPost]
? ? ? ? public async Task<dynamic> SendMsg(string msg)
? ? ? ? {
? ? ? ? ? ? await _hub.Send(msg);
? ? ? ? ? ? return new { code = 1123, msg = true };
? ? ? ? }
?到此服务端代码就到一段落。接下来看前端代码
二 前端实现? 框架asp.net core web? 3.1
? ? 1 引入signalRjs文件? ?
在创建好的项目上? 右键》添加》选择客户端库??
?前端代码??
<div class="container">
? ? <div class="row"> </div>
? ? <div class="row">
? ? ? ? <div class="col-2">用户名</div>
? ? ? ? <div class="col-4"><input type="text" id="userInput" /></div>
? ? </div>
? ? <div class="row">
? ? ? ? <div class="col-2">要发送的消息</div>
? ? ? ? <div class="col-4"><input type="text" id="messageInput" /></div>
? ? </div>
? ? <div class="row">
? ? </div>
? ? <div class="row">
? ? ? ? <div class="col-6">
? ? ? ? ? ? <input type="button" id="sendButton" value="发送消息" />
? ? ? ? </div>
? ? </div>
</div>
<div class="row">
? ? <div class="col-12">
? ? ? ? <hr />
? ? </div>
</div>
<div class="row">
? ? <div class="col-6">
? ? ? ? <ul id="messagesList"></ul>
? ? </div>
</div>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>
<script>
? ? var connection = new signalR.HubConnectionBuilder().withUrl("http://localhost:25379/api/WeatherForecast/SendMsg").build();
? ? //Disable send button until connection is establisheddocument.getElementById("sendButton").disabled = true;
? ? connection.serverTimeoutInMilliseconds = 24e4;
? ? connection.keepAliveIntervalInMilliseconds = 12e4;
? ? //接受消息
? ? connection.on("SendAsync", function ( message) {
? ? ? ? debugger;
? ? ? ? var msg = message;
? ? ? ? var encodedMsg = " says " + msg + "\n来源是";
? ? ? ? var li = document.createElement("li");
? ? ? ? li.textContent = encodedMsg;
? ? ? ? document.getElementById("messagesList").appendChild(li);
? ? });
? ? connection.start().then(function () {
? ? ? ? document.getElementById("sendButton").disabled = false;
? ? }).catch(function (err) {
? ? ? ? return console.error(err.toString());
? ? });
? ? document.getElementById("sendButton").addEventListener("click", function (event) {
? ? ? ? var user = document.getElementById("userInput").value;
? ? ? ? var message = document.getElementById("messageInput").value;
? ? ? ? //和服务器必须一致
? ? ? ? connection.invoke("Send", message).catch(function (err) {
? ? ? ? ? ? return console.error(err.toString());
? ? ? ? });
? ? ? ? event.preventDefault();
? ? });
</script>
创建signalR链接? 注意一致
最后结果：自己发送消息? 以及使用postman发送消息? html均可获得响应
特别鸣谢：我的同事 我的好大哥? 闫x
?
?
?
?
?