Einführung in die Verwendung von WebSocket in Angular

Der Inhalt dieses Artikels befasst sich mit der Verwendung von WebSocket in Angular. Er hat einen guten Referenzwert und ich hoffe, er kann Freunden in Not helfen.

Es ist wirklich schwierig für Leute, die neu bei WebSocket sind. Und auf dem Weg dorthin gibt es viele Fallstricke.

Es gibt viele Artikel und Plug-Ins zum Thema WebSocket. Nach langem Suchen finde ich dieses Plug-In immer noch gut. Für Freunde, die AngularJS zum Entwickeln verwenden, kann ich dieses wärmstens empfehlen

angular websocket.js

Es verfügt über eine relativ vollständige Entwicklungsdokumentation und Nutzungsanleitung und kann Funktionen wie die automatische Wiederherstellung von Verbindungen realisieren, wenn der Socket unerwartet unterbrochen wird.

Das Folgende ist der in meinem Projekt verwendete Websocket

Fügen Sie zuerst die Datei websocket.js in das Projekt ein und fügen Sie die Modulreferenz in der App hinzu

angular.module( 'app', ["ngWebSocket"])

Die Anforderungsadresse verwendet eine automatische Anpassung, die hauptsächlich die Probleme beim Ändern der Entwicklungsumgebung und des Servers nach dem Wechsel löst oder nach dem Ändern des Domänennamens anwendbar ist

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;
//可以监控这个变量的变化实时处理对应的操作
})

Okay, Websocket-Verwendung, auf der Clientseite ist es fast so

Als Nächstes werde ich Ihnen die Verwendung von Websocket auf der Serverseite in der .net-Umgebung vorstellen.

Es ist in Nachrichtenverteilungscenter- und Socket-Broadcast-Ereignisse unterteilt, die durch Hintergrundnachrichtenänderungen ausgelöst werden.

Verwandte Empfehlungen:

JS-Ereignishandler, die beim JavaScript-Lernen häufig anzutreffen sind

Der Prozess zum Erstellen eines Reaktionsgerüsts basierend auf Webpack4 Analyse

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von WebSocket in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!