angular-websocket学习笔记

最新推荐文章于 2024-01-29 10:50:07 发布

IT精英999

最新推荐文章于 2024-01-29 10:50:07 发布

阅读量248

点赞数 1

分类专栏： angular

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

                    版权声明：本文为博主原创文章，未经博主允许不得转载。                        https://blog.csdn.net/u013480581/article/details/80830634                    </div>
                                                <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-cd6c485e8b.css">
                                    <div id="content_views" class="markdown_views prism-github-gist">
                <!-- flowchart 箭头图标 勿删 -->
                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                    <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                </svg>
                                        <p>主要记录在开发中使用angular-websocket的学习心得，如有错误请批评指正。</p>

angular-websocket的开源库地址：https://github.com/gdi2290/angular-websocket

前言

最近一直在学习开发一款物联网项目。（项目地址：https://blog.csdn.net/u013480581/article/details/80931778 ）通过后端管理平台，可以将设备的信息反馈到用户端，并实时控制。后端用的workerman+websocket技术，可以实现长连接，双向通信。

主要是通信协议和指令的设计。设备端和用户端先在PC端模拟，demo通过JavaFX基本实现。因为考虑可以通过多种终端控制设备，初步想法是设计一款移动版web的前端。

web端的开发自己还是小白一枚。调研到angular+jqweui还挺符合自己的简单需求，可以实现单页web应用、仿微信UI。

由于JavaScript中提供websocket API，我们不需要操心数据的封装和发送。只需要关心自己的业务逻辑（设计指令实现功能），和与UI的交互。业务逻辑的设计不再啰嗦。

由于刚开始学习angulajs，发现将基于websocket的业务逻辑（主要就是①接收反馈后解析，②封装不同的指令发送）写在js文件后，可以实现②，但没有办法实现异步UI的刷新。

异步的websocket消息过来怎么更新UI？

我们知道angularjs的优点就是可以实现UI（html）和业务（js）的分离，类似与软件UI开发中MVC的思想。但是软件UI中通常是通过多线程异步更新UI的，并且API都封装好了。

AngularJS 教程 | 菜鸟教程中可以通过$http读取远程服务器的数据并异步更新UI，是对http数据的支持。但是websocket呢？

在此之前，我们需要搞清楚angularjs是怎么绑定数据，异步更新UI的原理。这里有介绍：理解Angular的/ $a p p l y （）和 / a p p l y （）和 / a p p l y （）和 /$ rootScope.digest() unless autoApply is set to `false in the options. Callback gets called with a MessageEvent object.
- 综上，注入factory服务，其中最重要的是实现onMessage，根据不同的业务逻辑功能，其流程：接收到反馈消息——>定义成一个对象——>在factory中return对象——>对象要与UI中$scope变量对应——>异步刷新UI的scope。
- 注意：factory返回的对象组，①只能是数组和方法。②并且都需要在scope中声明，要不然咋刷新呢。由于官方的demo很简单，演示下自己的demo：
```
app.factory('Messages', Messages);
app.controller('mainController', function($scope, $rootScope, Messages) {
    //连接websocket
    $rootScope.Messages = Messages;
});
//反馈数据，需要异步刷新到UI中
var dataA, dataB = null;
var dataB = [];
```

function Messages($websocket) {

ws = $websocket("ws://"+document.domain+":8282");


ws.onMessage(onmessage);

ws.onError(function(event) {
  console.log("连接异常");
});

ws.onClose(function(event) {
    console.log("连接关闭");
});

ws.onOpen(function() {
  console.log("连接中..");
});
// setTimeout(function() {
//   ws.close();
// }, 500)

return {
    getdataA: function() {
        return dataA;
    },
    getdataB: function() {
       return dataB;
    },
    dataC: dataC

}

// 服务端发来消息时
function onmessage(e)
{
console.log(‘接受到的数据：’ + e.data);
var data = JSON.parse(e.data);
switch(data[‘type’]){
// 服务端ping客户端
case xxx:
parsedataA(data);
break;
case ‘xxx’:
parsedataB(data);
break;
case ‘xxx’:
parsedataC(data);
break;
}
}

//解析反馈A
function parsedataA(data){
	dataA = xxx;
}

//解析反馈B
function parsedataA(data){
	dataB = xxx;
}

//解析反馈c
function parsedataA(data){
	datac = [xxx];
}

//发送指令A
function sendA(pid){
    console.log('发送消息A');
    send(xxx, xxx);
}
//发送指令B
function sendB(){
    console.log('发送消息C');
    send(xxx, xxx);
}
...

//发送指令消息
function send(type, content){
    var json_data = '{"type":"'+ type +'","content":'+ content +'}';
    ws.send(json_data);
    console.log("发送的数据: "+ json_data + "\n");
}

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-e44c3c0e64.css" rel="stylesheet">
                </div>
</article>