angular如何使用websocket的方法介紹

這篇文章要跟大家介紹的文章內容是關於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廣播事件。

相關推薦：

JavaScript學習中常會遇到的js事件處理程序

如何基於webpack4建立一個react腳手架的過程分析

以上是angular如何使用websocket的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！