首页 > 代码库 > websocket 项目应用

websocket 项目应用

2024-09-11 16:02:25   216人阅读

序言

很早就想用起来websocket，可惜需要后台服务的支持，技术的翻新总会给我带来巨大的冲击，最近后端人员学习了websocket相关后台技术。于是我们开始动起来了。

学习

这位大兄弟的文章  http://www.cnblogs.com/smark/archive/2012/11/26/2789812.html

背景

因为需要做一个进度条功能，表格刷新基本angualr的双向绑定，说到底就是 $watchCollection，脏值检测来驱动渲染。所以之前加载方法就是定时改变数据源来实现。

结果表格性能比较差，尤其数据多的时候。长连接针对这种数据整盘推送的模式也很无力，于是websocket登场了。

技术分享

 

项目实践

            if(("WebSocket" in window)){
                ws = new WebSocket(‘ws://‘+$location.host()+‘:‘+$location.port()+‘/websocket‘);
                ws.onopen = function(){
                    var param = {
                        "type":"app",
                        "namespace":params.namespace,
                        "name":params.name
                    };
                    ws.send(angular.toJson(param));
                };
                ws.onmessage = function(result){
                    var apps = angular.fromJson(result.data).apps;
                    if(!$scope.servicesTable.dataset||$scope.servicesTable.dataset.length != apps.length){
                        //更新整个表格数据
                        $scope.servicesTable.dataset = apps;
                        //重新绘制topo图
                        drawNodes(apps);
                    }
                    else{
                        for(var i=0;i<$scope.servicesTable.dataset.length;i++){
                            $scope.servicesTable.dataset[i].metadata.availablereplicas = apps[i].metadata.availablereplicas;
                            $scope.servicesTable.dataset[i].metadata.desiredreplicas = apps[i].metadata.desiredreplicas;
                        }
                    }
                    $scope.services=services;
                    console.log(services)
                    //脏值检测
                    $scope.$apply();
                };
                ws.onclose = function(evt){
                    $mdToast.show($mdToast.simple().textContent(‘webSocket已经被关闭 ！‘).position(‘top right‘).theme(‘md-accent‘));
                };

            }
            else{
                $mdToast.show($mdToast.simple().textContent(‘当前浏览器不支持webSocket ！‘).position(‘top right‘).theme(‘md-accent‘));
            }

效果

实现的效果自我感觉比较完美，实现了点对点监控，虽然数据还是全盘推送。但是只更新影响进度条的数据，没有出现整个表格刷新的局面，表格能够完成实时渲染。

注意点

①交互为字符串形式交互，需要javascript对象和json对象切换

②心跳未加，有需要再优化

websocket 项目应用


联系
我们