Introduction à l'utilisation de Websocket en angulaire

Le contenu de cet article explique comment utiliser websocket en angulaire. Il a une bonne valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

C'est vraiment difficile pour les personnes qui découvrent Websocket. Et il y a de nombreux pièges sur le chemin.

Il existe de nombreux articles et plug-ins sur websocket sur Internet. Après de nombreuses recherches, je pense toujours que ce plug-in est bon. Pour les amis qui utilisent Angularjs pour développer, je le recommande vivement

.

angular websocket.js

Ceci dispose d'une documentation de développement et de conseils d'utilisation relativement complets, et peut réaliser des fonctions telles que la récupération automatique des connexions lorsque le socket est interrompu de manière inattendue.

Ce qui suit est le websocket utilisé dans mon projet

Introduisez d'abord le fichier websocket.js dans le projet et ajoutez la référence du module dans l'application

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

L'adresse de la demande utilise une adaptation automatique, qui résout principalement le problème de changement d'environnement de développement et de serveur après le changement, ou elle est applicable après avoir changé le nom de domaine

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

Bien Après avoir utilisé websocket, le côté client est presque comme ça

Ensuite, je partagerai avec vous l'utilisation de websocket côté serveur dans l'environnement .net.

Il est divisé en événements de centre de distribution de messages et de diffusion de socket déclenchés par des modifications de messages en arrière-plan.

Recommandations associées :

Gestionnaires d'événements JS souvent rencontrés dans l'apprentissage JavaScript

Le processus de création d'un échafaudage de réaction basé sur webpack4 Analyse

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!