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!