signal 聊天记录_实时查看车辆位置app

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

开发工具与关键技术： js

作者：GuanLW

撰写时间：2022/3/18

第一步：先在vs的NuGet包中下载安装Microsoft.AspNet.SignalR。安装完成后会多以下几个文件

signal 聊天记录_实时查看车辆位置app

第二步：右键项目->新建项，选择signalr集线器类，并写入代码，namespace与类名记得改成实际类名

如下：

using Microsoft.AspNet.SignalR;

using Microsoft.AspNet.SignalR.Hubs;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;



namespace webLoans

{

    [HubName("msgHub")]//客户端调用，首字母要小写

    public class MsgHub : Hub

    {

        //在hub中编写的方法，都是要被客户端调用的方法

        [HubMethodName("sendMsg")]//客户端调用，首字母要小写

        public void SendMsg(string name, string txt)

        {

            //服务器主动调用客户端的方法，即客户端必须有getMsg方法

            Clients.All.getMsg(name, txt);

        }

    }

}

第三步：右键项目，新建普通类Startup.cs

如下：

using Microsoft.Owin;

using Owin;

using System;

using System.Threading.Tasks;



[assembly: OwinStartup(typeof(webLoans.Startup))]



namespace webLoans

{

    public class Startup

    {

        public void Configuration(IAppBuilder app)

        {

            // 有关如何配置应用程序的详细信息，请访问 https://go.microsoft.com/fwlink/?LinkID=316888

            app.MapSignalR();

        }

    }

}

这时可以先测试一下，运行项目，在网页中输入地址https://localhost:44340/signalr/hubs，注意填入实际端口号。网页显示部分内容如下：

signal 聊天记录_实时查看车辆位置app

第四步：编写html页面，代码如下：

@{

    Layout = null;

}



<!DOCTYPE html>



<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="~/Scripts/jquery-1.6.4.js"></script>//实际的路径

    <script src="~/Scripts/jquery.signalR-2.4.3.js"></script>//实际的路径

    <script src="/signalr/hubs"></script>//动态生成的

    <script>

        //绑定登录按钮的事件

        $(function () {

            $("#btnLogin").click(function () {

                login();

            });



        });



        function login() {

            if ($("#txtName").val().length > 0)

                sessionStorage.setItem("user", $("#txtName").val());

            else {

                alert("登录失败");

                return;

            }

            $("#sendBtn").removeAttr("disabled");

            serverClient();

        }



        //服务器连接操作

        function serverClient() {

            //注册服务器连接

            var msgHub = $.connection.msgHub;

            //2.给客户端注册方法，被服务器调用的方法,

            //服务器主动调用给txt内容，客户端被动接收

            //接收到之后做什么

            msgHub.client.getMsg = function (name, txt) {

                //var txtTemplate = "<div><span>{
  
  {name}}</span>:<span>{
  
  {content}}</span></div> ";

                //var html = txtTemplate.replace('{
  
  {name}}', name).replace('{
  
  {content}}', txt);

                //$("#msgList").append(html);

                var txtHtml = '<li><strong>' + htmlEncode(name)

                    + '</strong>: ' + htmlEncode(txt) + '</li>';

                $("#msgList").append(txtHtml);

                //alert(txt);

            }



            //3.启动连接并绑定处理事件

            $.connection.hub.start().done(function () {



                $("#sendBtn").click(function () {

                    msgHub.server.sendMsg(sessionStorage.getItem("user"), $("#txtMsg").val());

                    $('#txtMsg').val('').focus();

                })

            }).fail(function () {



            });

        }



        // 将发来的信息转化为html标签以便添加到页面

        function htmlEncode(value) {

            var encodedValue = $('<div />').text(value).html();

            return encodedValue;

        }



    </script>

</head>

<body>

    <div id="msgList">



    </div>

    <input type="text" id="txtName" name="name" value="" />

    <button id="btnLogin">登录</button>

    <input type="text" id="txtMsg" name="name" value="" />

    <button id="sendBtn" disabled="disabled">发送消息</button>



</body>

</html>

注意头部引用的脚本，前两个是你的项目中的实际脚本文件，最后一个是在运行时动态生成的，实际使用时需要修改前两个。

第五步：打开两个网页进行测试，效果如下：

先输入登录名，然后发送信息即可。可以实时聊天。

signal 聊天记录_实时查看车辆位置app