上海做建材上什么网站好,新版网页传奇,企业运营管理论文,淘宝网站建设策划案前言:最近有一个公司项目做一个排队叫号系统#xff0c;系统功能不复杂#xff0c;所以后端就我一人#xff0c;难点在于消息推送到安卓屏上#xff0c;最近有点时间#xff0c;把我工作中使用的技术分享出来#xff01;整个技术架构:前端使用vue uniapp#xff0c;后端… 前言: 最近有一个公司项目做一个排队叫号系统系统功能不复杂所以后端就我一人难点在于消息推送到安卓屏上最近有点时间把我工作中使用的技术分享出来整个技术架构:前端使用vue uniapp后端使用dotNet core3.1数据库是SqlserverORM框架是SqlSuagar,中间件有log4netNewtonsoft.JsonMicrosoft.AspNet.SignalR.Core。当然我们在使用一个自己以前没使用的技术时都是先写一个demo那么我今天就给大家分享我写的demo首先我们新建一个dotNet Core3.1程序然后我们打开Nuget包管理器搜索SignalR安卓最新的稳定版本1.1.0然后我们新建一个文件夹用来存放我们新建的SignalR自定义集线器代码如下public class ChatHub : Hub{/// summary/// 这里的方法是给前端调用的/// /summary/// param nameuser/param/// param namemessage/param/// returns/returnspublic async Task SendMessage(string user, string message){await Clients.All.SendAsync(ReceiveMessage, user, message);}/// summary/// 连接成功/// /summary/// returns/returnspublic 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.MapHubChatHub(/chathub); //设置长连接地址endpoints.MapControllers();});}这样我们服务端就搭建好了当然搭建好之后我们需要自己写个前端代码验证自己的WebSocket服务是否搭建成功客户端代码 打开Vscode 新建WebSocket.html我们在head标签内链接外部Signalr JS外部资源文件代码如下!--微软SignalR js 客户端 必须要 --script srchttps://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.3/signalr.min.js/script然后写一个简单的发送消息界面html代码div idappdiv classviewdivtextarea v-autosize v-modelsendValue rows3 placeholder请输入要发送的内容/textarea/divdivinput typetext v-modelname placeholder输入名称 //divdivh-button colorprimary clicksend发送消息/h-button/div/div/divjs代码scriptnew 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界面展示效果
