angularJS socket,angularjssocket

來源:互聯網
上載者:User

angularJS socket,angularjssocket

項目Controller檔案中載入Service層socket.js.頁面進入該controller所在頁面時串連socket(也可一進入項目就串連,看需求),細節還需繼續最佳化,寫下來以防忘了~
Service層:socket.js

/*******************************************************************************Angular Websocket Service************************************author:ristal************************************************created:2014-04-01**************************/angular.module('websocketService', []).service('sWSocket', ['$timeout', function ($timeout) {    var self = this;  var callbackPool = []; //onMessage分類處理函數    var delayPool = []; //延遲處理請求    var registerPool = [];//登入的方法    var data = {};    var ws = null;    var connected = false;    function newWebSocket() {// var wsURL = "ws://10.188.199.4:8080/YIXUN_1.5_WEB/websocket/";    var wsURL = "ws://10.188.192.200:8000/websocket/";    var wsTmp = new WebSocket(wsURL);    wsTmp.onopen = function (evnt) {    onOpen(evnt)    };    wsTmp.onmessage = function (evnt) {    onMessage(evnt)    };    wsTmp.onclose = function (evnt) {    onclose(evnt)    };    wsTmp.onerror = function (evnt) {    onError(evnt)    };    return wsTmp;    }    ws = newWebSocket();    function onOpen() {    ws.readyState = true;    updateStatus("onOpen : " + (connected ? 'TTRRUUEE' : 'FFAALLESS'));    //緩衝池中存在請求    while (delayPool.length > 0) {    var popData = delayPool.shift();    if (popData.isReg == 1) {    self.register(popData.appId, popData.methodId, popData.scope, popData.callbackFuns);    } else if(popData.isReg == 0){    self.unRegister(popData.appId, popData.methodId, popData.scope, popData.callbackFuns);    }else {    self.send(popData.appId, popData.methodId, popData.content);    }    }    }    function onclose() {    ws.readyState = false;    updateStatus("onClosed : " + (connected ? 'TTRRUUEE' : 'FFAALLESS'));    $timeout(function () {    console.log('Reconnecting to server...')    newWebSocket();    }, 3000);    }    function onMessage(evnt) {    //這裡處理接收資料    var evenData = JSON.parse(evnt.data);    console.log("Received data from websocket: ", evenData);//    //返回處理//    if(evenData.appId === 'register')//    {//    if(evenData.methodId === 'unRegister'){//    //方法返回成功,加入方法池//    if(evenData.content.status == 'SUCCEED'){////registerPool.push({appId: evenData.content.appId, methodId: evenData.content.methodId});//    console.log("registerPool:", registerPool);//    }else{//方法返回失敗,重新發送請求////    }//    }//    }//執行回呼函數//傳回後端即時推送的資料   <span style="color:#ff0000;"> angular.forEach(callbackPool,function(value){    if(value.appId === evenData.appId && value.methodId === evenData.methodId){    value.callback(evenData.content);    }    });</span>    }    function onError(evnt) {    ws.readyState = false;    console.log('ERROR: ', evnt);    $timeout(function () {    console.log('Reconnecting to server...')    newWebSocket();    }, 3000);    }    function updateStatus(status) {    console.log(status);    }    //註冊方法    //註冊成功後會一直監聽後端推送的相應部分的資料    //直到登出此方法    self.register = function (appId, methodId, callbackFuns) {    var webSocketRe = {};    webSocketRe.appId = 'register';    webSocketRe.methodId = 'register';    webSocketRe.content = {    appId: appId,    methodId: methodId    };    if (ws.readyState != true){//websocket服務未開啟    webSocketRe.isReg = 1;//register    webSocketRe.appId = appId;    webSocketRe.methodId = methodId;    webSocketRe.callbackFuns = callbackFuns;    delayPool.push(webSocketRe);    console.log("register-delayPool:", delayPool);    console.log("sending is delay.");    return "sending is delay.";    } else {    callbackPool.push({appId:appId,methodId:methodId,callback:callbackFuns});    console.log("callbackPool:",callbackPool);    return doSend(webSocketRe);    }    }    //登出方法    //通知後端不再推送相應資料    self.unregister = function (appId, methodId,callbackFuns) {    console.log("unregister");    var webSocketRe = {};    webSocketRe.appId = 'register';    webSocketRe.methodId = 'unRegister';    webSocketRe.content = {    appId: appId,    methodId: methodId    };    //websocket服務未開啟    if (ws.readyState != true){    webSocketVo.isReg = 0;//unRegister    delayPool.push(webSocketRe);//    console.log("unregister is delay.");    return "unregister is delay.";    } else {    console.log("sending unregister.");        var num = 0;        //迴圈檢查回呼函數池    angular.forEach(callbackPool,function(value,key){    if(value.appId === appId && value.methodId === methodId){num += 1;    if(value.callback === callbackFuns){    delete callbackPool[key];    num -=1;        }    }    });    console.log("num:",num);    console.log("callbackpool:",callbackPool);    //回呼函數池中已經不存在此方法才真正發送websocket請求    //通知後端不再推送相應資料    if(num === 0 ){    doSend(webSocketRe);    }    }    }    //實際發送websocket請求    function doSend(webSocketVo) {    return ws.send(JSON.stringify(webSocketVo));    }    self.send = function (appId, methodId, content) {    var webSocketVo = {};    webSocketVo.appId = appId;    webSocketVo.methodId = methodId;    webSocketVo.content = content;    if (ws.readyState == 0) {   // webSocketVo.isReg = false;//不需要註冊    delayPool.push(webSocketVo);    console.log("sending is delay.");    return "sending is delay.";    } else {    console.log("sending is doing.");    console.log("webSocketVo:",webSocketVo);    return doSend(webSocketVo);    }    }    return self;    }]);
Controller層:
<pre name="code" class="javascript">/*******************************************************************************Angular Websocket Controller**********************************author:ristal************************************************created:2014-04-01**************************/angular.module('websocketControllers').controller('loginCtrl', function ($scope,loginFactory,sWSocket,toaster,$location,$timeout) {  console.log("loginCtrl");$scope.status;var appId = 'heartBeat';var methodId = 'heartBeat';  var callback = function(evendata){  console.log("callback:",evendata);  $scope.menu = evendata;  $scope.$apply();  console.log($scope.menu);  }  var callback1 =  function(evendata){  console.log("callback1:",evendata);  $scope.menu = evendata;  $scope.$apply();  console.log($scope.menu);  }  $scope.doLogin = function(user){    loginFactory.doLogin(user)      .success(function (success) {          if(success.resultCode == 200){            $scope.status = '登入成功';            console.log("doLogin");            $location.path('/home');          var content2 = {          userName:'hmm',          userPassword:'111'          };         //websocket登陸        sWSocket.send('login', 'doLogin', content2);        //考慮極端情況,一個頁面有多個模組監聽同一個方法        //但展示在頁面的資料需對接收的即時監聽的資料做不同處理        //登陸後註冊方法heartBeat,回呼函數callback        //頁面切換時(也就是登出scope時)才登出此方法        sWSocket.register(appId,methodId,callback);//登陸後也註冊方法heartBeat,回呼函數callback1//3s後立即登出此方法        sWSocket.register(appId,methodId, callback1);          $timeout(function () {          console.log("unregister callback1");          sWSocket.unregister(appId,methodId,callback1);          }, 3000);                  }else if (success.resultCode == 102) {          toaster.pop('error', "操作失敗", success.resultReason);          $scope.status = success.resultReason;          };      })      .error(function (error) {          $scope.status = '登入失敗: ' + error.message;      });  };  $scope.logout = function(){      loginFactory.logout()        .success(function () {            $scope.status = '退出成功';            console.log("logout");        })        .error(function (error) {            $scope.status = '退出失敗: ' + error.message;        });  };  //登出scope時登出方法heartBeat,回呼函數callback  $scope.$on("$destroy",function(){  console.log("on-destroy");  sWSocket.unregister(appId,methodId,callback);  });  });





php的運行環境

給你推薦一個軟體Xampp。
就像安裝windows一樣,安裝之後,不需要怎麼配置,你的電腦就成為了一台PHP+MySQL+FTP的伺服器了。比較傻瓜,上網搜一下就好了。
 
PHP的網站難不那,需要什方面的知識

我倒是覺得PHP不錯。
你需要先看看html是怎麼回事?
然後知道C的過程。
然後你就自然而然知道了PHP!
 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.