angular使用 websocket,少點套路,多一點真誠


對於開始接觸websocket的人來說,實在是太難了。而且一路上的坑還不少。

網上有很多關於websocket的文章和插件,老碼找了很多之后還是覺得這個插件不錯,對於使用angularjs開發的朋友,我很推薦這個

angular websocket.js

這個有比較全的開發文檔和使用指導,可以實現socket意外中斷自動恢復連接等功能。

下面是我的項目中使用的websocket,

先在項目中引進websocket.js文件,app中添加模塊引用

angular.module('app', [“ngWebSocket”])

請求地址使用的是自動適配的,主要解決開發環境和服務器切換之后的更改麻煩,或者更改域名之后適用

angular.module('app').factory('socketData', function ($websocket, $location) {
var host = $location.host();
if ($location.port() && $location.port() != 80 && $location.port() != 443) {
host = host + ':' + $location.port();
}
var ws = "ws";
if ($location.protocol() == 'https') {
ws = "wss";
}
// 開始連接
var dataStream = $websocket(ws + '://' + host + '/Api/App');
dataStream.reconnectIfNotNormalClose = true;
var collection = [];
var methods = {
lastestdata: {},
readyState: 0,
collection: collection,
sendData: function (data) {
dataStream.send(JSON.stringify(data));
}
};
dataStream.onMessage(function (message) {
methods.readyState = dataStream.readyState;
methods.lastestdata = JSON.parse(message.data);
collection.push(JSON.parse(message.data));

//這里可以直接跳轉到制定的頁面,我這里是跳轉到了我的地圖頁面
//window.location = '/#/app/Map/Index'
});

dataStream.onError(function (message) {

//監控狀態變化,實時跟進連接狀態
methods.readyState = dataStream.readyState;
});

dataStream.onOpen(function (message) {
methods.readyState = dataStream.readyState;
});

dataStream.onClose(function (message) {
methods.readyState = dataStream.readyState;
});

return methods;
})

使用的時候也很簡單,直接在controller中加入這個

app.controller('mapctrl', function ($scope, $timeout, $interval, $state, $location, $window, $http, $compile, socketData) {

$scope.socketData = socketData;

//可以監控這個變量的變化實時處理對應的操作

})

好了websocket使用,客戶端的就差不多這樣了

接下來老碼給大家分享.net環境下服務器端的websocket使用。

其中分為,消息分發中心和后台消息變化觸發的socket廣播事件。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM