1. 首页
  2. 文章列表
  3. 在angular中集成SignalR即时通信框架

前段时间在做项目的时候,由于前端项目是用的angular,在SignalR页面的时候出现了一个非常诡异的问题:就是当第一次进入SignalR页面时,页面正常,WebSocket也能跑通,但是当点击到其他页面后,再返回到SignalR的这个页面时,页面的数据全部“冻结”了,但WebSocket仍然在接收数据,浏览器控制台也没报什么错,连angular的$apply、$watch都用上了也没什么用,这个问题困扰了好些天,在网上也Google了许久无答案,同事之间也相互研究提出了很多的解决方案(都是大牛),也并没有解决这个问题,后来在github搜答案的时候,发现了一个叫angular-Signalr的js指令,尝试一番之后,终于完美的解决了这个问题(没有互联网解决不了的问题,哈哈),那么下面就做个小Demo分享下这个经历:

首先,准备好后端环境:

参照asp.net即时通信框架——signalR起步搭好后端环境,并写一个Hub方法:

public void Update()

{

   while(true)

  {

    Clients.Caller.receiveDate(DateTime.Now);

    Thread.Sleep(1000);

  }

}


前端引入文件:

<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>

<script src="https://cdn.bootcss.com/signalr.js/2.2.2/jquery.signalR.min.js"></script>

注入依赖:

var myApp = angular.module('myApp', ["SignalR"]);

angular控制器:

myApp.controller("home", ["$scope", "$http", "Hub", function($scope, $http, Hub) {

var hub = new Hub('myhub', {

        rootPath: '/signalr',

        listeners: {//客户端方法

            "receiveDate": function(data) {

                //todo:数据推送回来要做的操作

            },

        },

        methods: ['update'],//导入服务端方法

        errorHandler: function(error) {

            //console.log(error);

        },

        stateChanged: function(state) {

            switch (state.newState) {

                case $.signalR.connectionState.connecting:

                    break;

                case $.signalR.connectionState.connected:

                    {

                        hub.update();//运行服务端方法

                    }

                    break;

                case $.signalR.connectionState.reconnecting:

 

                    break;

                case $.signalR.connectionState.disconnected:

                    break;

            }

        }

    });

    hub.disconnect();//不管有没有连接,先断一下

    hub.connect();//断后再连

}

现在就可以在angular中使用SignalR做即时通信了。

版权声明:

本文仅用于学习、研究和交流目的,欢迎非商业性质转载。本文链接:https://masuit.com/64

l  博主在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表,不会网购无快递。

l  文章内容部分来源于互联网,不代表本人的任何立场;涉及到的软件来源于互联网,仅供个人下载使用,版权归该软件开发者所有,请勿用于商业用途,下载后请于24小时内删除,请支持正版!因下载本站资源造成的损失,全部责任由使用者本人承担!如果你是原作者,认为本文内容对您的权益有所侵犯,请联系博主进行投诉,待博主进行严格地审查和背景调查后,情况属实的将在三天内将本文删除或修正。

l  博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。

l  博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的纯镀 24k 文章,请原谅博主成为一个无耻的文档搬运工!

l  博主只是一名普通的互联网从业者,不懂修电脑,不会卖电脑,不会帮你盗号,不会破解开机密码,找不回你丢失的手机等,如有这样的想法请绕道!

相关推荐:

大前端的未来可能代替ajax的东西——Fetch API初体验 解决代码着色组件SyntaxHighlighter长代码不换行以及行号显示错位的问题
自从用了linqjs,再也不用担心操作json集合啦 通过引用TypeScript定义来提高你的Javascript开发能力
angular表格神器ng-table的服务端分页的解决方案 web前端杂谈:传统的 Ajax 已死,Fetch得永生!
ECMAScript 2017(ES8)新特性尝鲜 又一前端神级类库——lodash.js工具库

评论区:

    还没有评论哦,赶紧来写评论吧

    分享按钮