知识分享：使用web写UI, 使用js对接C++项目, 提高开发效 率。

Presentation on theme: "知识分享：使用web写UI, 使用js对接C++项目, 提高开发效 率。"— Presentation transcript:

1 知识分享：使用web写UI, 使用js对接C++项目, 提高开发效 率。
webui nodejs 解放C++ 知识分享：使用web写UI, 使用js对接C++项目, 提高开发效 率。

2 C 一些短板 UI不友好, 做复杂的UI, 耗费太大 入门门槛高, 很少能做到开箱即用

3 webui 基于浏览器, 使用html, css, js等做的网页
浏览器原理： webkit: 渲染引擎 V8： js执行引擎

4 node Javascript: 浏览器脚本, 不具有原生能力, 只能在浏览器里面执行。
nodejs: 由V8引擎以及C++扩展提供原生能力, 单纯的v8是没有原生能力的, 原生能力主要来源node(我们可以认为它是C++扩展) 基于v8引擎的, 具有原生能力的javascript deps目录 nodejs源码 /src: 由C/C++写的核心模块

5 Electron Electron 基于chromium和nodejs, 让我们可以使用html, css和javascript 构建我们的应用

6 历史行情服务器数据客户端

7 代码结构 Socket: Protobuf: socket + protobuf
var self = this; this.socket = new this.net.Socket(); this.socket.connect({port:port, host:ip}, callback); Protobuf: this.path = require('path'); this.protobuf = require('protobufjs'); this.bytebuffer = require('bytebuffer'); this.long = require('long'); this.builder = this.protobuf.loadProtoFile(this.path.join(__dirname, '..', 'proto', 'common.proto')); this.hisrpc = this.builder.build('HISRPC'); socket + protobuf C++服务端只需要提供pb的socket接口, 无需为javascript做任何改变.

8 send(msg) { let msgArrayBuffer = msg
send(msg) { let msgArrayBuffer = msg.toArrayBuffer(); let length = msgArrayBuffer.byteLength; let sendBuffer = new this.bytebuffer(4 + length, true); sendBuffer.writeUint32(length).append(msg).flip(); return this.socket.write(sendBuffer.toBuffer(true)); } ondata(data) { // 先把原始的buffer转成bytebuffer let buf = new this.bytebuffer(data.length, true); buf.append(data.buffer); this.buffer.buffer.append(buf); // 处理队列 while (this.buffer.remaining() >= this.need) { // 头 if (this.ishead) { // 获得新的长度 this.need = this.buffer.readInt(); this.ishead = false; } else { // 获得buf let subbuf = this.buffer.copy(this.buffer.offset, this.need); this.buffer.offset += this.need; // 反射回去 if (this.datacb != undefined) { this.datacb(subbuf); } this.ishead = true; this.need = 4; } } } 解析socket 封包解包

9 解析protobuf protobufjs bytebuffer // 生成pbotobuf
get_login_rpc(data, cbSuccess, cbFailed) { let method = this.hisrpc.enum_method_type.server_login_req; let serverLoginReq = new this.hisrpc.server_login_req_msg(); let seq = this.get_seq(); serverLoginReq.name = data.username; serverLoginReq.pass = data.password; let rootRpc = this.get_root_prc(method, serverLoginReq, seq, cbSuccess, cbFailed); return rootRpc; } 解析protobuf protobufjs bytebuffer // 解析pbotobuf ondata(data) { //let rootMsg = this.hisrpc.decode(data); let rootMsg = new this.hisrpc.rpc_root_msg.decode(data); let repMsg = undefined; let seq = rootMsg.seq; if (rootMsg.method == this.hisrpc.enum_method_type.server_login_rep) { repMsg = this.hisrpc.server_login_rep_msg.decode(rootMsg.body); } else if (rootMsg.method == this.hisrpc.enum_method_type.server_pong_rep) { repMsg = this.hisrpc.server_heart_rep_msg.decode(rootMsg.body); } }

10 pbjs 好处：独立于electron, 作为一个类似C++的静态lib存在, 可以在任何地方被nodejs调用。
一个独立的nodejs库, 封装了nodejs与C++服务器接口。 作用：自动化测试, 可以用来测试接口, 可以用来测试数据, 自动化上传等。 打开了整个nodejs的格局, 想象一下, 我们可以用node连接任何一个地方的数据, 比较数据测试数据, 上传数据。

11 合适 不适合 合适： 各种浏览器脚本 各种工具 不合适： 高性能后端 原理：
合适 不适合 不合适： 高性能后端 原理： nodejs的执行效率取决于v8, v8取决于libuv, libuv取决于epoll, 单进程node， 底层只有一个epoll, 无法利用多核性能。 参考：