c#
1. startup.cs 加入signalr
public void ConfigureServices(IServiceCollection services)
{
...
services.AddSignalR();
services.AddCors(options =>
options.AddDefaultPolicy(builder => builder.WithOrigins("https://localhost:44331").AllowAnyHeader().AllowAnyMethod().AllowCredentials())); // 針對跨網域呼叫加入來源白名單
}
public void Configure(IApplicationBuilder application)
{
application.UseRouting();
application.UseCors(); // 處理跨網域呼叫
application.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/hub");
});
....
}
2. 建立hub class
using Microsoft.AspNetCore.SignalR;
public class ChatHub : Hub
{
// 接收通知
public Task ClientMessage(string name,string message)
{
...
}
}
3. 發送通知
private readonly Microsoft.AspNetCore.SignalR.IHubContext<ChatHub> _hubContext;
public xxxController(Microsoft.AspNetCore.SignalR.IHubContext<ChatHub> hubContext) {
_hubContext = hubContext;
}
public async Task<IActionResult> xxx() {
await _hubContext.Clients.All.SendCoreAsync("訂單異動", new object?[] { 訂單編號});
}
----
js
1. 與Server建立連線 - 對應 server 為 core
安裝 signalr : npm install @microsoft/signalr
import * as signalR from "@microsoft/signalr";
var connection = new signalR.HubConnectionBuilder().withUrl("https://xxx/hub").withAutomaticReconnect().build();
async function start() {
try {
await connection.start({ transport: 'webSockets' });
console.log("SignalR Connected.");
} catch (err) {
console.log(err);
setTimeout(start, 5000);
}
}
// Start the connection.
start();
//接收通知
connection.on("訂單成立", function (message) {
console.log(message);
});
//發送通知
connection.invoke("ClientMessage", 'ReceiveMessage', 'hihihi').catch(function (err) {
return console.error(err.toString());
});
2. 與Server建立連線 - 對應 server 不為 core
import 'signalr';
import $ from 'jquery';
const huburl = "https://www.lifeacademy.org/cc/signalr";
const connection = $.hubConnection(huburl);
connection.disconnected(() => {
setTimeout(() => {
connection.start({ transport: 'webSockets' });
console.log("Connection restarted");
}, 5000);
});
var proxy = connection.createHubProxy('GetHub');
proxy.on('訂單成立', function (message) {
console.log(message);
});
connection.start({ transport: 'webSockets' });
沒有留言:
張貼留言