uniapp .net 聊天

### 使用 UniApp 和 .NET 实现聊天功能 #### 项目结构设计 为了构建一个基于 UniApp 的前端应用和 .NET 后端服务的实时聊天应用程序，需要规划清晰的应用架构。通常情况下，前端负责用户界面展示以及发送/接收消息；而后端则处理业务逻辑、数据存储及推送通知等功能。 #### 前端开发 (UniApp) ##### 安装依赖库 确保安装了必要的插件来支持 WebSocket 或 Socket.IO 进行即时通讯连接： ```bash npm install socket.io-client --save ``` ##### 初始化Socket连接 在 `main.js` 中引入并初始化socket实例: ```javascript import io from 'socket.io-client'; const socket = io('http://your-dotnet-server-address'); Vue.prototype.$socket = socket; ``` ##### 创建聊天页面布局 创建一个新的 Vue 组件用于显示聊天记录列表与输入框区域： ```html <template> <view class="chat-container"> <!-- 聊天内容 --> <scroll-view scroll-y :style="{height: chatHeight}"> <block v-for="(item, index) in messageList" :key="index"> <text>{{ item.content }}</text><br/> </block> </scroll-view> <!-- 输入区 --> <input type="text" placeholder="请输入..." @confirm="sendMessage"/> </view> </template> <script> export default { data() { return { messageList: [], chatHeight: '' } }, methods:{ sendMessage(e){ const content=e.detail.value.trim(); if(!content){return;} this.messageList.push({content}); e.target.clearValue(); // 发送至服务器 this.$socket.emit('newMessage', {content}); } }, onLoad(){ uni.getSystemInfo({ success:(res)=>{ let windowHeight=res.windowHeight-uni.upx2px(80); // 减去底部输入栏高度 this.chatHeight=windowHeight+'px'; } }); // 接收来自服务器的消息事件监听器 this.$socket.on('receiveMessage',(data)=>{ console.log(data); this.messageList.push(data); }); } } </script> ``` #### 后端开发 (.NET Core) ##### 添加 SignalR 到 ASP.NET Core 应用程序 SignalR 是一种简化实现实时 Web 功能的过程的技术框架。可以通过 NuGet Package Manager 来添加 Microsoft.AspNetCore.SignalR.Server 包到项目里。 配置 Startup.cs 文件以启用 Hub Routing 及其他必要设置： ```csharp public void ConfigureServices(IServiceCollection services) { services.AddControllersWithViews(); // 注册Hub类 services.AddSignalR(); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { ... app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller}/{action=Index}/{id?}"); // 映射hub路由 endpoints.MapHub<MessageHub>("/messageHub"); }); } ``` 定义 MessageHub 类继承自 Hub 并实现相应的方法来进行客户端间通信操作： ```csharp using System.Threading.Tasks; using Microsoft.AspNetCore.SignalR; namespace YourNamespace.Hubs { public class MessageHub : Hub { public async Task SendMessage(string user, string message) { await Clients.All.SendAsync("ReceiveMessage", user, message); } public override async Task OnConnectedAsync() { Console.WriteLine($"New connection id:{Context.ConnectionId}"); await base.OnConnectedAsync(); } public override async Task OnDisconnectedAsync(Exception exception) { Console.WriteLine($"Connection disconnected.{exception?.Message}"); await base.OnDisconnectedAsync(exception); } } } ``` 最后一步是在控制器中触发向所有已连接客户广播新接收到的信息的动作： ```csharp private readonly IHubContext<MessageHub> _hubContext; public ChatController(IHubContext<MessageHub> hubContext) { _hubContext = hubContext; } // POST api/chat/send [HttpPost("[action]")] public IActionResult Send([FromBody]string msgContent) { var userName = User.Identity.Name ?? "Anonymous"; _hubContext.Clients.All.SendAsync("ReceiveMessage", userName, msgContent); return Ok(new { status = true }); } ```