2018.3-6

完成的工作:

  • 快仓实习
    • antd开发*2
    • cocos 开发
    • nginx
    • 图片流demo
      • 待整理
    • emqtt&&eggjs
    • 摸鱼
  • thinkjs && antd
    • VPN管理系统*1.5
    • 图书管理系统(?)
  • OctoberCms
    • 文档
    • 二开
  • WordPress
    • 二次开发
  • 划水
    • wecenter
    • react
  • 血缘白金

emqtt & plugin for eggjs

emqtt简介

http://www.emqtt.com/docs/v2/index.html

EMQ 2.0 (Erlang/Enterprise/Elastic MQTT Broker) 是基于 Erlang/OTP 语言平台开发,支持大规模连接和分布式集群,发布订阅模式的开源 MQTT 消息服务器。

解决问题:
  • 长链接的消息订阅模型(基于tcp/websocket),好处是自己不用自定(web)socket的协议,性能>> 轮询
  • 据官网说能百万连接(?)
  • QOS
  • 开源的轮子

可能的问题:

  • 需要可靠性测试和压力测试
  • 开源的坑(开源版本弱于商业版本,开源漏洞修改不及时)
  • erlang二次开发困难

mqtt协议: http://www.emqtt.com/docs/v2/mqtt.html

栗子

# 启动emqtt服务器
unzip emqttd-macosx-v2.0.zip && cd emqttd

# 启动emqttd
./bin/emqttd start

# 检查运行状态
./bin/emqttd_ctl status

# 停止emqttd
./bin/emqttd stop

 node 和 浏览器使用mqtt.js : https://github.com/mqttjs/MQTT.js#browser

//使用 mqtt.js
var mqtt = require('mqtt')
var client  = mqtt.connect('mqtt://test.mosquitto.org')

client.on('connect', function () {
  client.subscribe('presence')
  client.publish('presence', 'Hello mqtt')
})

client.on('message', function (topic, message) {
  // message is Buffer
  console.log(message.toString())
  client.end()
})

egg mqtt plugin

需求

  1. egg获取(监听)mqtt服务器消息
  2. egg根据逻辑发布mqtt消息

解决方案

1

要求在egg js服务器中使用一个长期运行的进程进行处理:

egg js agent:

  • 多进程模型和进程间通讯: http://eggjs.org/zh-cn/core/cluster-and-ipc.html
  • 多进程研发模式增强: http://eggjs.org/zh-cn/advanced/cluster-client.html

在agent.js里面处理监听:

  • 使用emqtt 的$SYS主题订阅获得服务器信息: http://www.emqtt.com/docs/v2/guide.html#sys
    • 使用mqtt.js
  • 使用emqtt的http接口主动获得服务器信息:http://www.emqtt.com/docs/v2/rest.html
    • 此处注意需要进行http base认证(全明文传输包括用户名或者密码的信息,需要注意环境或者加密)
    • 可以使用egg的 agent.curl 实现
  • 处理错误,agent进程的稳定性要求高:
    • mqtt.js的错误
    • curl的错误
    • 其他

2

使用mqtt.js 根据逻辑处理:

  • 在agent里面处理业务
  • 给worker进行发消息(rpc)让其干活
  • 其他

3

插件化:订阅/监听逻辑写在插件根目录下的agent.js里面,发布逻辑看个人实现

cocos creator 开发基础

 

  • 环境
    • pc
      • 下载cocos creator: http://docs.cocos.com/creator/manual/zh/getting-started/install.html
      • 配置vs code: http://docs.cocos.com/creator/manual/zh/getting-started/coding-setup.html
    • andriod环境搭建: http://docs.cocos.com/creator/manual/zh/publish/setup-native-development.html
  •  结构
    • 项目结构:http://docs.cocos.com/creator/manual/zh/getting-started/project-structure.html
    • 编辑器基础
    • 基本概念
      • 场景: http://docs.cocos.com/creator/manual/zh/asset-workflow/scene-managing.html
        • 创建场景
      • 组件
      • 节点
      • 脚本
  • 资源
    • 主要使用:场景,贴图,预置,图集,脚本,瓦片图,其他:http://docs.cocos.com/creator/manual/zh/asset-workflow/
  •  事件
    • 系统事件
      • 触摸事件
      • pc事件
        • 点击,滚轮
      • 键盘事件
    • 自定义事件冒泡
  • 场景构建
    • 节点
    • 组件
      • 常用组件
  • 布局/样式
    • 锚点 /坐标系/定位
    • 定位组件
    • 自适应:fit width/height
    • layout
    • 对齐
    • 缩放
    • 移动
    • 样子主要靠贴图
  • 脚本开发
    • 创建和使用脚本
    • 处理
    • 节点和组件处理
    • 生命周期
    • 场景处理
    • 资源处理
    • 动作处理:http://docs.cocos.com/creator/manual/zh/scripting/action-list.html
  • 插件/模块化
    • 插件脚本
    • model.export
  • 网络通信
    • websocket/socket.io
    • xhr
  • 构建发布
  • 性能
    • 性能评价
      • 图形性能
      • 节点性能
    • 性能优化
      • 预置
      • 修改逻辑,减少渲染
    • 其他。。
  • js 语言版本
    • 基本支持es6(模块化不一样)
    • 插件脚本需要babel

实现选择框(触摸或者鼠标移动添加选择框):

一个单色Sprite作为选择框的表示,其anchor为0,0.

事件监听在其父节点。

触摸开始时:

记录起始点A,设置position为该点,启动touchMove事件

触摸移动时:

获得触摸位置B,设置width和height为B – A。

触摸结束时:

关闭touchMove事件, 执行选择逻辑。


更多内容或者协助请联系nameliuqi@outlook.com

 

最近的坑

  • 基于blob/base64/img.src连续图片显示
    • img.src性能最高,其他的cpu消耗(编解码)太大
  • js的shell交互
    • 子进程
  • cocos creator使用
    • 见其他教程
  • nginx总结
    • 反向代理
    • 负载均衡
    • 实现原理(?)
  • antd
    • trick
    • 本地化
      • icon按照官网教程
      • 引用的图片/其他搜索一下

快速ppt

通过markdown生成ppt的几个工具

  • https://yhatt.github.io/marp/
  • https://github.com/impress/impress.js
  • http://www.vmfor.com/ppt/index.html
  • https://slides.com/
  • https://linuxconfig.org/tpp-the-command-line-presentation-tool

从ant design pro 到 UI测试 再到持续集成

测试

主要内容总结于 https://pro.ant.design/docs/ui-test-cn

测试框架jest:渲染组件模拟 DOM 环境

测试库 enzyme :提供测试api

测试方法:构建部件检测dom关键部分

e2e 测试:端到端测试也叫冒烟测试,用于测试真实浏览器环境下前端应用的流程和表现,相当于代替人工去操作应用。

测试方法:模拟用户操作检测dom关键部分。

用selenium同样可以做到。

全部的总结见测试

Q&A

it函数 https://stackoverflow.com/questions/24145304/angularjs-js-it-function


持续集成

持续集成是什么请见百度

计划方案:

https://baike.baidu.com/item/Jenkins/10917210?fr=aladdin

gitlabci

to be continued

nodejs学习

前言

软设使用electron框架,故学习nodejs

教程

菜鸟教程(发现这家还不错) http://www.runoob.com/nodejs/nodejs-tutorial.html