• 实时通讯


    过完2018年最后一个长假,看了年初给自己的flag,默默的发现距离感还是很强的。。。。

    先说正题,最近在项目中碰到了实时通讯的需求,翻看了很多资料,最终选取signalr。

    附上链接 https://www.asp.net/signalr 

    项目是基于Angular4的,后端采用的Abp框架,自带通知架构。(https://aspnetboilerplate.com/Pages/Documents/Notification-System)

    先说怎么将signalr引入项目中。

    1、npm i signalr

    在angular-cli.json文件里引入:"../node_modules/signalr/jquery.signalR.js"

    2、建立连接

    var connection = $.hubConnection();
    var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
    contosoChatHubProxy.on('addContosoChatMessageToPage', function(name, message) {
        console.log(name + ' ' + message);
    });
    connection.start().done(function() {
        // Wire up Send button to call NewContosoChatMessage on the server.
        $('#newContosoChatMessage').click(function () {
            contosoChatHubProxy.invoke('newContosoChatMessage', $('#displayname').val(), $('#message').val());
            $('#message').val('').focus();
                    });
        });

    3、后端配合

    后端主要在于跨域,微软的官方文档里也有写到如何解决(https://docs.microsoft.com/en-us/aspnet/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client#how-to-establish-a-cross-domain-connection

    4、代码基本:using Microsoft.AspNet.SignalR;
    using Microsoft.Owin.Cors;
    using Owin;
    namespace MyWebApplication
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                // Branch the pipeline here for requests that start with "/signalr"
                app.Map("/signalr", map =>
                {
                    // Setup the CORS middleware to run before SignalR.
                    // By default this will allow all origins. You can
                    // configure the set of origins and/or http verbs by
                    // providing a cors options with a different policy. map.UseCors(CorsOptions.AllowAll); var hubConfiguration = new HubConfiguration
                    {
                        // You can enable JSONP by uncommenting line below.
                        // JSONP requests are insecure but some older browsers (and some
                        // versions of IE) require JSONP to work cross domain
                        // EnableJSONP = true
                    };
                    // Run the SignalR pipeline. We're not using MapSignalR
                    // since this branch already runs under the "/signalr"
                    // path.
                    map.RunSignalR(hubConfiguration);
                });
            }
        }
    }

    基础部分很是简单通透

    在消息处理这一块,ABP已经处理的很好了,只要调取相应的方法即可。区分一下消息的时效性(暂时的消息还是永久性的消息)。

  • 相关阅读:
    谷歌地图嵌入配置及代码生成器
    Easyui几种布局方式的使用
    9款超酷的jQuery/CSS3插件
    8款功能强大的最新HTML5特效实例
    《大话操作系统——做坚实的project实践派》(2)
    1、libgdx简单介绍
    自己定义Android Dialog
    纪念2014 TI DSP大奖赛
    LeetCode 96:Unique Binary Search Trees
    Chromium网页输入事件捕捉和手势检測过程分析
  • 原文地址:https://www.cnblogs.com/Vibge/p/9774652.html
Copyright © 2020-2023  润新知