前言:

????????最近有一個公司項目做一個排隊叫號系統，系統功能不復雜，所以后端就我一人，難點在于消息推送到安卓屏上，最近有點時間，把我工作中使用的技術分享出來！

整個技術架構:前端使用vue uniapp，后端使用dotNet core3.1，數據庫是Sqlserver，ORM框架是SqlSuagar,中間件有log4net，Newtonsoft.Json，

Microsoft.AspNet.SignalR.Core。

當然我們在使用一個自己以前沒使用的技術時都是先寫一個demo，那么我今天就給大家分享我寫的demo！

首先我們新建一個dotNet Core3.1程序

然后我們打開Nuget包管理器，搜索SignalR安卓最新的穩定版本1.1.0

然后我們新建一個文件夾，用來存放我們新建的SignalR自定義集線器，代碼如下！

public class ChatHub : Hub{/// <summary>/// 這里的方法是給前端調用的/// </summary>/// <param name="user"></param>/// <param name="message"></param>/// <returns></returns>public async Task SendMessage(string user, string message){await Clients.All.SendAsync("ReceiveMessage", user, message);}/// <summary>/// 連接成功/// </summary>/// <returns></returns>public override async Task OnConnectedAsync(){await Clients.All.SendAsync("Connected", "連接成功[來至服務器的信息]");}}

然后我們在StartUp類的ConfigureServices方法中配置Signalr，配置跨域，代碼如下！

public void ConfigureServices(IServiceCollection services){services.AddControllers();services.AddCors(options => options.AddPolicy("CorsPolicy",builder =>{builder.AllowAnyMethod().AllowAnyHeader().SetIsOriginAllowed(o => true).AllowCredentials();}));services.AddSignalR();}

最后我們在StartUp類的Configure方法中使用Signalr，使用我們自定義的集線器ChatHub，代碼如下！

public void Configure(IApplicationBuilder app, IWebHostEnvironment env){if (env.IsDevelopment()){app.UseDeveloperExceptionPage();}app.UseRouting();app.UseAuthorization();app.UseCors("CorsPolicy");app.UseEndpoints(endpoints =>{endpoints.MapHub<ChatHub>("/chathub"); //設置長連接地址endpoints.MapControllers();});}

這樣我們服務端就搭建好了，當然搭建好之后我們需要自己寫個前端代碼驗證自己的WebSocket服務是否搭建成功！

客戶端代碼 打開Vscode 新建WebSocket.html

我們在head標簽內鏈接外部Signalr JS外部資源文件，代碼如下！

<!--微軟SignalR?js?客戶端?必須要?--><script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.3/signalr.min.js"></script>

然后寫一個簡單的發送消息界面

html代碼

<div id="app"><div class="view"><div><textarea v-autosize v-model="sendValue" rows=3 placeholder="請輸入要發送的內容"></textarea></div><div><input type="text" v-model="name" placeholder="輸入名稱" /></div><div><h-button color="primary" @click="send">發送消息</h-button></div></div></div>

js代碼

<script>new Vue({el: "#app",data: {signalR: null,name: "MissLiu",sendValue: "其實AspNetCore.SignalR 非常簡單"},methods: {initSignalR() {var _this = this;_this.signalR = new signalR.HubConnectionBuilder().withUrl("http://localhost:64059/ChatHub").configureLogging(signalR.LogLevel.Information).build();try {_this.signalR.start();} catch (err) {console.log(err);}//監聽連接成功_this.signalR.on("Connected", (message) => {HeyUI.$Message(message)});_this.signalR.on("ReceiveMessage", (user, message) => {HeyUI.$Notice({type: "info",title: user + " 說 ",content: message});});},send() {this.signalR.invoke("SendMessage", this.name, this.sendValue).catch(function(err) {return console.error(err.toString());});}},mounted() {this.initSignalR();},}) </script>

界面展示效果

總結

以上是生活随笔為你收集整理的dotNet Core使用SignalR实现websocket的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。