一、搭建项目
1、创建一个asp.net core mvc 项目
2、nuget 下载和安装 microsoft.aspnetcore.signalr
vs提示版本冲突
这时我们选择低版本即可
二、signalr配置
1、在model中创建一个类myhub 代码如下
public class myhub:hub { public async task sendmessage(string user, string message) { await clients.all.sendasync("receivemessage", user+"["+datetime.now.tolongtimestring()+"]", message); } public async task sendmessagetouser(string user, string message) { await clients.client(context.connectionid).sendasync("receivemessage", user + ":" + datetime.now.tolongtimestring()+"]", message); } }
2、在startup中注入signalr并在configure中配置路由
3、右键项目名=>添加=>添加客户端库
对于“提供程序”选择unpkg。
对于“库”输入 @aspnet/signalr@1.0.4 (@1.0.4 是根据 nuget signalr的本本定的)。
选择“选择特定文件”,展开“dist/browser”文件夹,然后选择“signalr.js”和“signalr.min.js”。
将“目标位置”设置为 wwwroot/lib/signalr/,然后选择“安装”。
配置完毕。
三、编码实现
1、修改views/home中的index.cshtml如下
<div class="container"> <div class="row"> </div> <div class="row"> <div class="col-6"> </div> <div class="col-6"> user..........<input type="text" id="userinput" /> <br /> message...<input type="text" id="messageinput" /> <input type="button" id="sendbutton" value="send message" /> </div> </div> <div class="row"> <div class="col-12"> <hr /> </div> </div> <div class="row"> <div class="col-6"> </div> <div class="col-6"> <ul id="messageslist"></ul> </div> </div> </div> <script src="~/lib/signalr/dist/browser/signalr.js"></script> <script src="~/js/chat.js"></script>
2、在js文件见创建一个js文件 chat.js
var connection = new signalr.hubconnectionbuilder().withurl("/chathub").build(); connection.on("receivemessage", function (user, message) { var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); var encodedmsg = user + " says " + msg; var li = document.createelement("li"); li.textcontent = encodedmsg; document.getelementbyid("messageslist").appendchild(li); }); connection.start().catch(function (err) { return console.error(err.tostring()); }); document.getelementbyid("sendbutton").addeventlistener("click", function (event) { var user = document.getelementbyid("userinput").value; var message = document.getelementbyid("messageinput").value; connection.invoke("sendmessage", user, message).catch(function (err) { return console.error(err.tostring()); }); event.preventdefault(); });
3、ctrl+f5 运行出两个网页
如对本文有疑问, 点击进行留言回复!!
网友评论