.Net core 中的SignalR JavaScript客户端已经不需要依赖Jquery了
一、服务端
1、nuget安装 Microsoft.AspNetCore.SignalR
2、在startup.cs中注册和使用signalr
services.AddSignalR(); app.UseEndpoints(endpoints => { endpoints.MapHub<ChatHub>("/chatHub"); endpoints.MapControllers(); });
3、创建chathub类并继承Hub
public class ChatHub:Hub { /// <summary> /// 给连接的所有人发送消息 /// </summary> /// <param name="username"></param> /// <param name="message"></param> /// <returns></returns> public Task SendMsg(string username,string message) { //Show方法需要在前端实现 return Clients.All.SendAsync("Show", username , message); } }
二、客户端
客户端用vue实现
1、安装signalr.js
pnpm install @microsoft/signalr
<template> <div class="hello"> <el-input v-model="user" type="text" /> <div id="message" v-html="remsg"></div> <div id="el-input"> <el-input id="chatbox" @keyup.native.enter="handle" type="textarea" :rows="1" placeholder="请输入内容" v-model="msg"></el-input> </div> <el-button size="small" style="display:inline-block;" icon="el-icon-s-promotion" type="suceess" @click="handle" plain></el-button> </div> </template> <script> import * as signalR from "@microsoft/signalr"; let hubUrl = "http://localhost:5001/chatHub"; //.net core 版本中默认不会自动重连,需手动调用 withAutomaticReconnect const connection = new signalR.HubConnectionBuilder().withAutomaticReconnect().withUrl(hubUrl).build(); connection.start().catch(err => alert(err.message)); export default { name: "Im", mounted() { var _this = this; //实现Show方法 connection.on("Show", function(username, message) { _this.remsg = _this.remsg + "<br>" + username + ":" + message; }); }, data() { return { user: "", msg: "", remsg: "" }; }, methods: { handle: function() { if(this.msg.trim()==""){ alert("不能发送空白消息"); return; } //调用后端方法 SendMsg 传入参数 connection.invoke("SendMsg", this.user, this.msg); this.msg = ""; } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } #el-input{ display: inline-block; width:96%; float: left; } #message { overflow-y:auto; text-align: left; border: #42b983 solid 1px; height: 500px; } </style>
写在最后:向大家介绍.Net core 3.0 SignalR+Vue 实现简单的IM(无jq依赖),主要包括.Net core 3.0 SignalR+Vue 实现简单的IM(无jq依赖)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。