각도에서 웹소켓을 사용하는 방법 소개

이 글은 각도에서 웹소켓을 사용하는 방법을 소개합니다. 참고할만한 가치가 있고 도움이 필요한 친구들에게 도움이 되길 바랍니다.

웹소켓을 처음 접하시는 분들에게는 정말 어렵습니다. 그리고 그 과정에는 많은 함정이 있습니다.

인터넷에 websocket에 대한 많은 기사와 플러그인이 있습니다. 많은 검색 결과, 여전히 이 플러그인이 좋다고 생각합니다.Angularjs를 사용하여 개발하는 친구들에게는 이

angular websocket.js

를 적극 권장합니다.

이것은 비교적 완전한 개발 문서를 가지고 있으며 사용 지침은 소켓이 예기치 않게 중단될 때 자동 연결 복구와 같은 기능을 실현할 수 있습니다.

다음은 내 프로젝트에 사용된 웹소켓입니다.

먼저 프로젝트에 websocket.js 파일을 도입하고 앱에 모듈 참조를 추가하세요

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

웹소켓을 사용하고 나면 클라이언트는 거의 이렇습니다

다음으로, .net 환경에서 이전 코드를 공유하겠습니다. 서버 측에서 websocket을 사용하세요.

배경 메시지 변경에 따라 발생하는 메시지 배포 센터와 소켓 방송 이벤트로 구분됩니다.

관련 추천:

JavaScript 학습에서 자주 접하는 js 이벤트 핸들러

webpack4를 기반으로 반응 스캐폴딩을 구축하는 방법에 대한 프로세스 분석

위 내용은 각도에서 웹소켓을 사용하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!