SignalR入坑筆記

asp.net core signalr 是乙個開源庫，它簡化了向應用程式新增實時 web 功能的功能。 實時 web 功能使伺服器端**能夠即時將內容推送到客戶端。

asp.net core signalr 的一些功能:

signalr 支援以下用於處理實時通訊的技術:

其中web socket僅支援比較現代的瀏覽器, web伺服器也不能太老.

而server sent events情況可能好一點, 但是也存在同樣的問題.

所以signalr採用了回落機制,signalr有能力去協商支援的傳輸型別.

web socket是最好的最有效的傳輸方式, 如果瀏覽器或web伺服器不支援它的話, 就會降級使用sse, 實在不行就用long polling.

一旦建立連線, signalr就會開始傳送keep alive訊息, 來檢查連線是否還正常. 如果有問題, 就會丟擲異常.

因為signalr是抽象於三種傳輸方式的上層, 所以無論底層採用的哪種方式,signalr的用法都是一樣的.

signalr中, 我們主要需要做的事情就是繼承hub類, 來和客戶端互相傳送訊息; 可以察覺出, signalr伺服器是乙個訊息中心, 客戶端將訊息傳送給signalr伺服器, 然後有我們來處理這些訊息, 可以將這些訊息廣播出去, 也可以將某個客戶端發過來的訊息**給另乙個客戶端, 實現兩個客戶端之間的通訊;

這裡將完成乙個簡單的使用signalr服務端和客戶端實時通訊的例子:

客戶端發起連線請求

伺服器端接受請求, 並向該客戶端發出計數, 從0到10

當計數到10, 服務端呼叫客戶端finished方法, 客戶端finished關閉連線

建立asp.net core專案, 選擇空模板

新建countservice類 和counthub類

public class countservice

public class counthub : hub

public async task getlastestcount()
, count: ");
} while (count < 10);
await client.sendasync("finished");}}

}}由於我這邊使用了angular來作為客戶端, 所以在startup中同時配置了跨域.

通過npm引入signalr:npm i @microsoft/signalr @types/node

匯入signalr:import * as signalr from '@microsoft/signalr/'

完整的如下:

chatcomponent

import  from '@angular/core';

import * as signalr from '@microsoft/signalr/'
/** * 建立連線
*/const connection = new signalr.hubconnectionbuilder()
.withurl('//localhost:5000/counthub')
.build();
@component()
export class chatcomponent implements oninit 
async ngoninit() );
connection.on('finished', () => );
connection.onclose(error => );
// 開始通訊
await connection.start().catch(error => );
if(connection.state === signalr.hubconnectionstate.connected)
await connection.send('getlastestcount', 'aaa');
}}

receiveupdate方法, 將方法引數在控制台列印出來;

finished方法則用來關閉連線.

執行結果:

服務端:

建立chathub類

chathub

using microsoft.aspnetcore.signalr;

namespace signalrstudy.hubs}}

);服務端很簡單, 就是把收到的訊息**給所有連線著的客戶端

客戶端(angular):

username: string = '匿名使用者';

constructor()

async startchat()

async sendmessage(message: string)

if(connection.state === signalr.hubconnectionstate.connected)

}}chatservice中處理了signalr互動的邏輯, 元件可以通過訂閱receivedmessage$來獲取最新的訊息...

下面放一下相關元件的**:

chat.component.ts

import  from '@angular/core';

import  from '../../services/chat.service';
@component()
export class chatcomponent implements oninit ) messagebox:elementref;
constructor(
private chatserv: chatservice
) async ngoninit() , 5);
});}  get username() 
set username(value: string) 
sendmessage() 
}

}說:

}

使用者名稱send

chat.component.css

#message-receive-area 

#message-container 
#message-send-area 

點這裡

樹莓派入坑筆記

目錄 1 上手配置 1.開機未連線顯示器，再連線顯示器，顯示器無訊號。2.ssh相關 使用ssh出現死活連不上的問題 過程試圖寫入的通道不存在 3.更新源 buster版本 樹莓派接有顯示器，hdmi監視器開啟，自動獲取螢幕解析度，初始化開啟，不連線顯示屏則進入命令列。解決vnc連線樹莓派不顯 示的...

RT1052 入坑筆記

1.組成架構 1.cpu arm cm7 32kb i cache 32kb d cache fpu mpu 512kb tcm ocram 96kb rom bootloader 2.核心外設 dma iomux timer x6 quadenc x4 flexpwm 8ch x4 watchdo...

react 入坑筆記（二） State

大致思想 在 react 中，每個元件都是乙個狀態機，通過與使用者的互動，實現不同狀態，然後渲染 ui，讓使用者介面和資料保持一致。react 裡，只需更新元件的 state，然後根據新的 state 重新渲染使用者介面 不要操作 dom class clock extends react.comp...