Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5a36789

Browse files
author
jh3r
committed
Improve native and web clients.
1 parent 9c64c06 commit 5a36789

File tree

5 files changed

+149
-7
lines changed

5 files changed

+149
-7
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,8 @@
11
# react-native-webview-js-bridge
22
A js bridge for react-native webview.
3+
4+
# Design
5+
6+
# Usage
7+
8+
# Develop

‎src/NativeClient.js

Lines changed: 62 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,92 @@
1-
import { EventBus } from './lib/EventBus';
1+
import { EventBus, util } from './lib';
2+
3+
const noop = function() {};
4+
5+
const defaults = {
6+
timeout: 5000 // 5000 ms
7+
};
28

39
export class NativeClient {
4-
constructor(options) {}
10+
constructor(options) {
11+
this.options = Object.assign({}, defaults, options);
12+
this.eventBus = new EventBus();
13+
}
14+
15+
_getWebview() {
16+
let webview;
17+
if (util.isFunction(this.options.getWebview)) {
18+
webview = this.options.getWebview();
19+
} else {
20+
webview = this.options.webview;
21+
}
22+
if (!webview) {
23+
throw new Error(`Webview can't be null.`);
24+
}
25+
return webview;
26+
}
527

628
/**
729
* Process event message from web client
830
* @param {*} event
931
*/
1032
processMessage(event) {
1133
const nativeEvent = event.nativeEvent;
34+
const msgEntity = this._getMessageEntity(nativeEvent);
35+
// Check message entity valid
36+
}
37+
38+
_getMessageEntity(nativeEvent) {
39+
return {};
1240
}
1341

1442
/**
1543
* Notify web client native ready.
1644
*/
17-
notifyReady() {}
45+
notifyReady() {
46+
this.sendEvent('$ready$');
47+
}
1848

1949
/**
2050
* Register event handler.
2151
* @param {string} eventName
2252
* @param {function} eventHandler
2353
*/
2454
when(eventName, eventHandler) {
55+
util.registerEvent(this.eventBus, eventName, eventHandler);
2556
return this;
2657
}
2758

59+
_buildMessageEntity(eventName, eventData) {
60+
return {};
61+
}
62+
2863
/**
2964
* Sent event to web client.
3065
* @param {string} eventName
3166
* @param {any} eventData
3267
*/
33-
sendEvent(eventName, eventData) {}
68+
sendEvent(eventName, eventData) {
69+
if (!eventName) {
70+
throw new Error(`Empty event name.`);
71+
}
72+
73+
// Build and send message.
74+
const msgEntity = this._buildMessageEntity(eventName, eventData);
75+
const msgStr = JSON.stringify(msgEntity);
76+
this._getWebview().postMessage(msgStr);
77+
78+
// Receive response.
79+
return new Promise((resolve, reject) => {
80+
// If timeout, remove listners
81+
let timerId = setTimeout(() => {
82+
this.eventBus.removeAllListeners(msgEntity.msgId);
83+
reject({ result: false, error: 'timeout' });
84+
}, this.options.timeout);
85+
// If reveive response, clear timeout.
86+
this.eventBus.once(msgEntity.msgId, event => {
87+
clearTimeout(timerId);
88+
resolve({ result: true });
89+
});
90+
});
91+
}
3492
}

‎src/WebClient.js

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,71 @@
1-
import { EventBus } from './lib/EventBus';
1+
import { EventBus, util } from './lib';
2+
3+
const defaults = {
4+
timeout: 5000 // 5000 ms
5+
};
26

37
export class WebClient {
48
constructor() {
9+
// Prepare properties
510
this.nativeIsReady = false; // Mark the native is ready.
11+
this.eventBus = new EventBus();
12+
// Init
613
this._init();
714
}
815

9-
_init() {}
16+
_init() {
17+
window.document.addEventListener('message', evt => this._processMessage(evt));
18+
}
19+
20+
_processMessage(evt) {
21+
const msgEntity = this._getMessageEntity(evt);
22+
}
23+
24+
_getMessageEntity(evt) {
25+
return {};
26+
}
1027

1128
/**
1229
* Register event handler.
1330
* @param {string} eventName
1431
* @param {function} eventHandler
1532
*/
1633
when(eventName, eventHandler) {
34+
util.registerEvent(this.eventBus, eventName, eventHandler);
1735
return this;
1836
}
1937

38+
_buildMessageEntity(eventName, eventData) {
39+
return {};
40+
}
41+
2042
/**
2143
* Sent event to native client.
2244
* @param {string} eventName
2345
* @param {any} eventData
2446
*/
25-
sendEvent(eventName, eventData) {}
47+
sendEvent(eventName, eventData) {
48+
if (!eventName) {
49+
throw new Error(`Empty event name.`);
50+
}
51+
52+
// Build and send message.
53+
const msgEntity = this._buildMessageEntity(eventName, eventData);
54+
const msgStr = JSON.stringify(msgEntity);
55+
window.postMessage(msgStr, '*');
56+
57+
// Receive response.
58+
return new Promise((resolve, reject) => {
59+
// If timeout, remove listners
60+
let timerId = setTimeout(() => {
61+
this.eventBus.removeAllListeners(msgEntity.msgId);
62+
reject({ result: false, error: 'timeout' });
63+
}, this.options.timeout);
64+
// If reveive response, clear timeout.
65+
this.eventBus.once(msgEntity.msgId, event => {
66+
clearTimeout(timerId);
67+
resolve({ result: true });
68+
});
69+
});
70+
}
2671
}

‎src/lib/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { EventBus } from './EventBus';
2+
import { util } from './util';
3+
4+
export { EventBus, util };

‎src/lib/util.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
export const util = {
2+
isFunction(fn) {
3+
return typeof fn === 'function';
4+
},
5+
6+
/**
7+
* Build message unique ID
8+
*/
9+
buildMessageId() {},
10+
11+
/**
12+
* Register event
13+
* @param {*} eventBus
14+
* @param {*} eventName
15+
* @param {*} eventHandler
16+
*/
17+
registerEvent(eventBus, eventName, eventHandler) {
18+
if (!eventName) {
19+
throw new Error(`Empty event name.`);
20+
}
21+
if (!util.isFunction(eventHandler)) {
22+
throw new TypeError(`Event handler must be a function.`);
23+
}
24+
if (eventBus.listenerCount(eventName) > 0) {
25+
throw new Error(`Event name ${eventName} registered.`);
26+
}
27+
eventBus.on(eventName, eventHandler);
28+
}
29+
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /