Introduction to how to use websocket in angular-JS Tutorial-php.cn

Introduction to how to use websocket in angular

不言

Release： 2018-07-27 13:36:35

Original

3157 people have browsed it

The content of this article is about how to use websocket in angular. It has a good reference value and I hope it can help friends in need.

It is really difficult for people who are new to websocket. And there are many pitfalls along the way.

There are many articles and plug-ins about websocket on the Internet. After searching a lot, I still think this plug-in is good. For friends who use angularjs to develop, I highly recommend this

angular websocket.js

This has relatively complete development documentation and usage guidance, and can realize functions such as automatic recovery of connections due to unexpected socket interruptions.

The following is the websocket used in my project.

First introduce the websocket.js file into the project and add the module reference to the app

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

The request address uses automatic adaptation, which mainly solves the trouble of changing the development environment and server after switching, or it is applicable after changing the domain name

angular.module(&#39;app&#39;).factory(&#39;socketData&#39;, function ($websocket, $location) {
    var host = $location.host();
    if ($location.port() && $location.port() != 80 && $location.port() != 443) {
        host = host + &#39;:&#39; + $location.port();
    }
    var ws = "ws";
    if ($location.protocol() == &#39;https&#39;) {
        ws = "wss";
    }
    // 开始连接
    var dataStream = $websocket(ws + &#39;://&#39; + host + &#39;/Api/App&#39;);
    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 = &#39;/#/app/Map/Index&#39;
    });
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(&#39;mapctrl&#39;, function ($scope, $timeout, $interval, $state, $location, $window, $http, $compile, socketData) {
$scope.socketData = socketData;
//可以监控这个变量的变化实时处理对应的操作
})

Copy after login

Okay websocket Usage, the client side is almost like this

Next, I will share with you the use of websocket on the server side in the .net environment.

It is divided into message distribution center and socket broadcast events triggered by background message changes.

Related recommendations:

JS event handlers often encountered in JavaScript learning

The process of how to build a react scaffolding based on webpack4 analyze

The above is the detailed content of Introduction to how to use websocket in angular. For more information, please follow other related articles on the PHP Chinese website!