Openwrt frontend backend

OpenWrt front&backend Guide
sean

Doc version
● V1 2018-05-15
– Juci frontend&backend
– AngularJS,Lighttpd,orange-rpcd,Lua

JuCI

.config
 add Juci and some busybox
 Delete luci

http://mkschreder.github.io/juci/manual/juci.html
 How JUCI Works
 Core Subsystems
 Controls Library
 Plugins
 Plugin Widgets Library

Juci frontend
● JavaScript
– package.json
– juci/src/lib/js/
● AngularJs
● async

JavaScript
●
prototype 属性使您有能力向对象添加属性和方法。
– 语法
● object.prototype.name=value
– 作用
●
动态的添加类的属性和方法
●
复制原类的内容
● http://www.w3school.com.cn/jsref/jsref_prototype_a
rray.asp

AngularJS

https://www.runoob.com/angularjs/angularjs-
tutorial.html

JUCI.app.directive

创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令， HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割 , runoob-directive:
AngularJS 实例
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1> 自定义指令 !</h1>"
};
});
</script>
</body>

Async
● https://github.com/caolan/async/
● async.series

Juci page load
●
Juci/src/js/juci.js
– scope.JUCI = scope.$juci = new JUCIMain();
– var app = scope.JUCI.app = angular.module("juci", [
● JUCI.page(name, template,redirect)
– Juci/src/pages/
● 404
● Login
– Themes/juci-theme-openwrt/src/pages/
● Overview
● Status-about

JUCIMain.prototype.$init

async.series
●
function doConnect(next){
●
scope.UBUS.$connect(options.host)
●
RPC connection established
●
scope.UBUS.$init().done(function(){

scope.UBUS = scope.$rpc = new
RevoRPC();
● Juci/src/js/rpc.js
● RevoRPC.prototype.$connect = function(host){
– var address = "ws://"+_host+"/websocket/";
– socket = this.socket = new WebSocket(address);
– socket.onmessage = function(e){
● try { msg = JSON.parse(data); } catch(e) {
● RevoRPC.prototype.$init = function(host){
– self.$list().done(function(result){
● //console.log("Adding method "+method);
● self.$register(obj, method); // can be used by $call
– "/uci":{"delete":[],"set":[],"configs":[],"add":[],"get":[]}}

RevoRPC();
● RevoRPC.prototype.$list = function(){
– return this.$request("list", [sid || "", "*"]);
– websocket > {"jsonrpc":"2.0","id":2,"method":"list","params":
["0188401d2c43171f66383fd61b56262f","*"]}
● RevoRPC.prototype.$request = function(method, params){
– var str = JSON.stringify({
● Jsonrpc: "2.0",
● id: req.id,
● method: method,
● params: params || []
– console.log("websocket > "+str);
– self.socket.send(str);

$call
● RevoRPC.prototype.$call
– return this.$request("call", [sid, object, method,
data]);

Juci/$uci
●
Juci/src/js/uci.js
●
scope.UCI = new UCI();
●
UCI.prototype.$init = function(){
– scope.UBUS.uci.configs().done(function(response){
●
Register from list result : "/uci":{"delete":[],"set":[],"configs":[],"add":
[],"get":[]}}
– Adding method configs
– registering: /uci, method: configs
●
Called by UBUS.object.method()
●
websocket > {"jsonrpc":"2.0","id":3,"method":"call","params":
["0188401d2c43171f66383fd61b56262f","/uci","configs",{}]}

JUCI Init
● console.log("JUCI Init");
● $juci.config.$init()
●
● $rpc.juci.ui.menu()

$juci.config = new JUCIConfig();
●
UCI.$sync("juci")
– websocket >
{"jsonrpc":"2.0","id":5,"method":"call","params":
["0188401d2c43171f66383fd61b56262f","/uci","get",
{"config":"juci"}]}
– self[cf].$sync({ reload: do_reload })
– console.log("Using settings from config/juci on
router");
– self.settings = UCI.juci;

menu
● console.log("juci: loading menu from server..");
● $rpc.juci.ui.menu()
– websocket >
{"jsonrpc":"2.0","id":6,"method":"call","params":
["0188401d2c43171f66383fd61b56262f","/juci/ui","me
nu",{}]}
– adding menu: overview overview
– INSERT LEAF: overview
– Registering page overview: pages/overview.html

Ubus component
● ubus library
● Ubus-scriptd
– scripts /usr/lib/ubus/
– services /usr/lib/ubus-services/

Ubus debug
$rpc.my.object.method().done(function(result){
console.log(JSON.stringify(result));
});

backend
● lighttpd
● mod_websocket
● orangerpcd

lighttpd
● /etc/conf.d/websocket.conf
● websocket_mod
websocket.server = (
"/websocket/" => ( "host" => "127.0.0.1",
"port" => 5303,
"proto" => "websocket"
)
)

Orange-rpcd
● Src/main.c
– main()
● const char *www_root = "/www";
● const char *listen_socket = "ws://127.0.0.1:5303";
● const char *plugin_dir = "/usr/lib/orange/api/";
● const char *pw_file = "/etc/orange/shadow";
● const char *acl_dir = "";
● int num_workers = 10;
– orange_server_t server = orange_ws_server_new(www_root);
– orange_server_listen(server, listen_socket)
– orange_new(plugin_dir, pw_file, acl_dir);
– orange_rpc_init(&rpc, server, app, 5000000UL, num_workers);

Lua
● http://manual.luaer.cn/

Lua libs
●
/usr/lib/lua
– Posix.so,uci.so,ubus.so
●
/usr/lib/orange/
– Lib/orange
– Api/juci
●
require
– local juci = require("orange/core");
– local network = require("orange/network");

debug
● Kill which started by init.d
– /etc/init.d/orange stop
● Start manual
– orangerpcd -vvvv
– https://github.com/mkschreder/juci/issues/84

Runtime process
● ps | grep rpc
● ps | grep http

issue
● rpcd crash
– /etc/init.d/rpcd restart
– UCI fail: https://github.com/mkschreder/juci/issues/78
● Lighttpd version wrong
– https://github.com/mkschreder/juci/issues/82
– Check build_dir/target-arm_cortex-a7_uClibc-1.0.14_eabi/lighttpd-
23644e8f150baac0aa5199a6820234d8e7898231/
– ./scripts/feeds update -a
– ./scripts/feeds uninstall -a
– ./scripts/feeds install -fap juci
– ./scripts/feeds install -a
– rm -f -r ./feeds/packages/net/lighttpd

Issue of juci
● JUCI.interval.repeat("overview-network", 1000
● JUCI.interval.repeat("wireless-refresh", 5000

Data As Code
● Juci Plugins
● JavaScript rpc object
● Overview Widgets
● Backend Lua Plugins

Juci Plugins
● @feeds/juci/juci/Makefile
● Top
– $(eval $(call RegisterAddon,Plugins,juci-openwrt-
wireless,JUCI OpenWRT standard wireless configuration,
+libiwinfo-lua))
– $(eval $(call RegisterAddon,Themes,juci-theme-openwrt,Juci
Default Theme,,depends on y || !JUCI_THEME_SELECTED))
● define RegisterAddon
– define RegisterAddonInner
● define Package/$(2)/config

JavaScript rpc object
● @juci/src/js/rpc.js
construct rpc object containing all of the methods in javascript
● RevoRPC.prototype.$init
– self.$list().done
● self.$register(obj, method);
– create the rpc method
– obj[method] = function(data){
return self.$call(object, method, data);
● scope.UBUS.uci.configs()
– Call /uci configs

Overview Widgets
● @themes/juci-theme-openwrt/src/pages/overview.js
● ["overview", "overviewStatus",
"overviewSlider"].map(function(widget_area)
– $scope[widget_area+"Widgets"] = queue.map(function(item)
● var directive = item[2][0];
● return "<"+directive.toDash()+"/>";
● $scope.overviewWidgetRows =
chunk($scope.overviewWidgets, 3);
– function chunk(array, chunkSize)
● return [].concat.apply([],array.map(function(elem,i) {
– return i%chunkSize ? [] : [array.slice(i,i+chunkSize)];

@themes/juci-theme-
openwrt/src/pages/overview.html
<div class="row" ng-repeat="row in overviewWidgetRows">
<div class="col-sm-4 overview-box" ng-repeat="widget in row">
<div dynamic="widget"/>
</div>
</div>
<div class="row" ng-repeat="widget in overviewStatusWidgets"
style="padding-left: 10px; padding-right: 10px">
<div dynamic="widget"/>
</div>

Backend Lua Plugins
● @orange-rpcd/src/orange.c
● _orange_load_plugins
– while((ent = readdir(dir))){
● INFO("loading plugin %s of %s at base %sn", objname,
fname, base_path);
● struct orange_luaobject *obj =
orange_luaobject_new(objname);
● orange_luaobject_load(obj, fname)
– luaL_loadfile(self->lua, file)
– lua_pcall(self->lua, 0, 1, 0)

Openwrt frontend backend

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Openwrt frontend backend

Similar to Openwrt frontend backend (20)

More from 晓东杜

More from 晓东杜 (6)

Recently uploaded

Recently uploaded (20)