zoukankan      html  css  js  c++  java
  • $websocket

    WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

    在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

    现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

    e.g 前端需要后台提供某个功能的得进度数据,并在页面显示 这时候我们可以使用websocket

     function applyFileProgressDialogController(scope, $location, $mdDialog, $q, $websocket, ToolbarService) {
                scope.applyProgress = 0;
                scope.openWebSocket = function () {
                    var wsUri = 'wss://' + $location.host() + ':' + $location.port() + '/ssc-common/translationNotification';
                    scope.ws = $websocket(wsUri);
                    scope.ws.onOpen(function () {
                        console.log("apply translation file web socket is opened ...");
                    });
                    scope.ws.onError(function (evt) {
                        console.log("apply translation file web socket is error:");
                        console.log(evt);
                    });
                    scope.ws.onClose(function (evt) {
                        console.log("apply translation file web socket is closed!");
                    });
                    scope.ws.onMessage(function (message) {
                        // var deferred = $q.defer();
                        var msgObject = JSON.parse(message.data);
                        scope.applyProgress = msgObject["translationProgressBar"].toString().split('.')[0];
                    });
                };
                scope.openWebSocket();
    
                scope.closeProgressDialog = function () {
                    ToolbarService.logout();
                    // $mdDialog.cancel();
                };
            }
  • 相关阅读:
    二分查找代码
    顺序查找代码
    js原生获取css属性
    前端使用nginx上传文件时,进度获取不对
    动态赋值poster,无法显示
    git 命令收藏
    promise笔记
    vscode自定义代码块
    vuex的初始化
    webstorm添加自定义代码块
  • 原文地址:https://www.cnblogs.com/RonnieQin/p/10653315.html
Copyright © 2011-2022 走看看