Skip to content

Commit 56f787c

Browse files
hassandragahassandraga
committed
New example - web_app_multi_client
1 parent 6ca7601 commit 56f787c

File tree

4 files changed

+492
-0
lines changed

4 files changed

+492
-0
lines changed

‎examples/C/web_app_multi_client/GNUmakefile‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
# WebUI C Example
2+
3+
# == 1. VARIABLES =============================================================
4+
5+
MAKEFILE_PATH := $(abspath $(lastword $(MAKEFILE_LIST)))
6+
PROJECT_DIR := $(dir $(MAKEFILE_PATH))/../../../
7+
TARGET := $(firstword $(MAKECMDGOALS))
8+
LIB_DIR := $(PROJECT_DIR)/dist
9+
ifeq ($(TARGET), debug)
10+
LIB_DIR := $(LIB_DIR)/debug
11+
endif
12+
INCLUDE_DIR := $(PROJECT_DIR)/include
13+
WEBUI_LIB_NAME = webui-2
14+
ifeq ($(WEBUI_USE_TLS), 1)
15+
WEBUI_LIB_NAME = webui-2-secure
16+
endif
17+
18+
# ARGS
19+
# Set a compiler when running on Linux via `make CC=gcc` / `make CC=clang`
20+
CC = gcc
21+
# Build the WebUI library if running via `make BUILD_LIB=true`
22+
BUILD_LIB ?=
23+
24+
# BUILD FLAGS
25+
STATIC_BUILD_FLAGS = main.c -I"$(INCLUDE_DIR)" -L"$(LIB_DIR)"
26+
DYN_BUILD_FLAGS = main.c -I"$(INCLUDE_DIR)" -L"$(LIB_DIR)"
27+
28+
# Platform conditions
29+
ifeq ($(OS),Windows_NT)
30+
# Windows
31+
PLATFORM := windows
32+
SHELL := CMD
33+
STATIC_BUILD_FLAGS += -l$(WEBUI_LIB_NAME)-static -lws2_32 -Wall -luser32 -static
34+
COPY_LIB_CMD := @copy "$(LIB_DIR)\$(WEBUI_LIB_NAME).dll" "$(WEBUI_LIB_NAME).dll"
35+
DYN_BUILD_FLAGS += "$(WEBUI_LIB_NAME).dll" -lws2_32 -Wall -luser32
36+
STATIC_OUT := main.exe
37+
DYN_OUT := main-dyn.exe
38+
LWS2_OPT := -lws2_32 -lOle32
39+
STRIP_OPT := --strip-all
40+
CONSOLE_APP := -Wl,-subsystem=console
41+
GUI_APP := -Wl,-subsystem=windows
42+
else
43+
STATIC_BUILD_FLAGS += -lpthread -lm -l$(WEBUI_LIB_NAME)-static
44+
DYN_BUILD_FLAGS += -lpthread -lm
45+
STATIC_OUT := main
46+
DYN_OUT := main-dyn
47+
ifeq ($(shell uname),Darwin)
48+
# MacOS
49+
PLATFORM := macos
50+
CC = clang
51+
COPY_LIB_CMD := @cp "$(LIB_DIR)/$(WEBUI_LIB_NAME).dylib" "$(WEBUI_LIB_NAME).dylib"
52+
DYN_BUILD_FLAGS += "./$(WEBUI_LIB_NAME).dylib"
53+
WKWEBKIT_LINK_FLAGS := -framework Cocoa -framework WebKit
54+
else
55+
# Linux
56+
PLATFORM := linux
57+
COPY_LIB_CMD := @cp "$(LIB_DIR)/$(WEBUI_LIB_NAME).so" "$(WEBUI_LIB_NAME).so"
58+
STATIC_BUILD_FLAGS += -ldl
59+
DYN_BUILD_FLAGS += -ldl "./$(WEBUI_LIB_NAME).so"
60+
STRIP_OPT := --strip-all
61+
ifeq ($(CC),clang)
62+
LLVM_OPT := llvm-
63+
endif
64+
endif
65+
endif
66+
67+
# == 2.TARGETS ================================================================
68+
69+
all: release
70+
71+
debug: --validate-args
72+
ifeq ($(BUILD_LIB),true)
73+
@cd "$(PROJECT_DIR)" && $(MAKE) debug
74+
endif
75+
# Static with Debug info
76+
ifneq ($(WEBUI_USE_TLS), 1)
77+
@echo "Build C Example ($(CC) debug static)..."
78+
@$(CC) -g $(CONSOLE_APP) $(STATIC_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(STATIC_OUT)
79+
endif
80+
# Dynamic with Debug info
81+
@echo "Build C Example ($(CC) debug dynamic)..."
82+
$(COPY_LIB_CMD)
83+
@$(CC) -g $(CONSOLE_APP) $(DYN_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(DYN_OUT)
84+
# Clean
85+
ifeq ($(PLATFORM),windows)
86+
@- del *.o >nul 2>&1
87+
else
88+
@- rm -f *.o
89+
@- rm -rf *.dSYM # macOS
90+
endif
91+
@echo "Done."
92+
93+
release: --validate-args
94+
ifeq ($(BUILD_LIB),true)
95+
@cd "$(PROJECT_DIR)" && $(MAKE)
96+
endif
97+
# Static Release
98+
ifneq ($(WEBUI_USE_TLS), 1)
99+
@echo "Build C Example ($(CC) release static)..."
100+
@$(CC) -Os $(GUI_APP) $(STATIC_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(STATIC_OUT)
101+
@$(LLVM_OPT)strip $(STRIP_OPT) $(STATIC_OUT)
102+
endif
103+
# Dynamic Release
104+
@echo "Build C Example ($(CC) release dynamic)..."
105+
$(COPY_LIB_CMD)
106+
@$(CC) $(GUI_APP) $(DYN_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(DYN_OUT)
107+
@$(LLVM_OPT)strip $(STRIP_OPT) $(DYN_OUT)
108+
# Clean
109+
ifeq ($(PLATFORM),windows)
110+
@- del *.o >nul 2>&1
111+
else
112+
@- rm -f *.o
113+
@- rm -rf *.dSYM # macOS
114+
endif
115+
@echo "Done."
116+
117+
clean: --clean-$(PLATFORM)
118+
119+
# INTERNAL TARGETS
120+
121+
--validate-args:
122+
ifneq ($(filter $(CC),gcc clang aarch64-linux-gnu-gcc arm-linux-gnueabihf-gcc musl-gcc),$(CC))
123+
$(error Invalid compiler specified: `$(CC)`)
124+
endif
125+
126+
--clean-linux: --clean-unix
127+
128+
--clean-macos: --clean-unix
129+
130+
--clean-unix:
131+
- rm -f *.o
132+
- rm -f *.a
133+
- rm -f *.so
134+
- rm -f *.dylib
135+
- rm -rf *.dSYM
136+
137+
--clean-windows:
138+
- del *.o >nul 2>&1
139+
- del *.dll >nul 2>&1
140+
- del *.a >nul 2>&1
141+
- del *.exe >nul 2>&1

‎examples/C/web_app_multi_client/Makefile‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# WebUI C Example
2+
# Windows - Microsoft Visual C
3+
4+
SHELL = CMD
5+
LIB_DIR = ../../../dist
6+
INCLUDE_DIR = ../../../include
7+
WEBUI_LIB_NAME = webui-2
8+
!IF "$(WEBUI_USE_TLS)" == "1"
9+
WEBUI_LIB_NAME = webui-2-secure
10+
!ENDIF
11+
12+
# Build the WebUI library if running `nmake BUILD_LIB=true`
13+
BUILD_LIB =
14+
15+
all: release
16+
17+
debug:
18+
!IF "$(BUILD_LIB)" == "true"
19+
@cd "$(LIB_DIR)" && cd .. && $(MAKE) debug
20+
!ENDIF
21+
# Static with Debug info
22+
!IF "$(WEBUI_USE_TLS)" != "1"
23+
@echo Build C Example (Static Debug)...
24+
@cl /Zi main.c /I"$(INCLUDE_DIR)" /link /LIBPATH:"$(LIB_DIR)\debug" /MACHINE:X64 /SUBSYSTEM:CONSOLE $(WEBUI_LIB_NAME)-static.lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:main.exe 1>NUL 2>&1
25+
!ENDIF
26+
# Dynamic with Debug info
27+
@echo Build C Example (Dynamic Debug)...
28+
@copy "$(LIB_DIR)\debug\$(WEBUI_LIB_NAME).dll" "$(WEBUI_LIB_NAME).dll"
29+
@cl /Zi main.c /I"$(INCLUDE_DIR)" /link /LIBPATH:"$(LIB_DIR)\debug" /MACHINE:X64 /SUBSYSTEM:CONSOLE $(WEBUI_LIB_NAME).lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:main-dyn.exe 1>NUL 2>&1
30+
# Clean
31+
@- del *.exp >nul 2>&1
32+
@- del *.ilk >nul 2>&1
33+
@- del *.lib >nul 2>&1
34+
@- del *.obj >nul 2>&1
35+
@echo Done.
36+
37+
release:
38+
!IF "$(BUILD_LIB)" == "true"
39+
@cd "$(LIB_DIR)" && cd .. && $(MAKE)
40+
!ENDIF
41+
# Static Release
42+
!IF "$(WEBUI_USE_TLS)" != "1"
43+
@echo Build C Example (Static Release)...
44+
@cl main.c /I"$(INCLUDE_DIR)" /link /LIBPATH:"$(LIB_DIR)" /MACHINE:X64 /SUBSYSTEM:WINDOWS $(WEBUI_LIB_NAME)-static.lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:main.exe 1>NUL 2>&1
45+
!ENDIF
46+
# Dynamic Release
47+
@echo Build C Example (Dynamic Release)...
48+
@copy "$(LIB_DIR)\$(WEBUI_LIB_NAME).dll" "$(WEBUI_LIB_NAME).dll"
49+
@cl main.c /I"$(INCLUDE_DIR)" /link /LIBPATH:"$(LIB_DIR)" /MACHINE:X64 /SUBSYSTEM:WINDOWS $(WEBUI_LIB_NAME).lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:main-dyn.exe 1>NUL 2>&1
50+
# Clean
51+
@- del *.exp >nul 2>&1
52+
@- del *.ilk >nul 2>&1
53+
@- del *.lib >nul 2>&1
54+
@- del *.obj >nul 2>&1
55+
@- del *.pdb >nul 2>&1
56+
@echo Done.
57+
58+
clean:
59+
- del *.obj >nul 2>&1
60+
- del *.ilk >nul 2>&1
61+
- del *.pdb >nul 2>&1
62+
- del *.exp >nul 2>&1
63+
- del *.exe >nul 2>&1
64+
- del *.lib >nul 2>&1

‎examples/C/web_app_multi_client/index.html‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>WebUI - Web App Multi-Client Example</title>
6+
<style>
7+
body {
8+
font-family: 'Arial', sans-serif;
9+
color: white;
10+
background: linear-gradient(to right, #507d91, #1c596f, #022737);
11+
text-align: center;
12+
font-size: 18px;
13+
}
14+
button,
15+
input {
16+
padding: 10px;
17+
border-radius: 3px;
18+
border: 1px solid #ccc;
19+
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
20+
transition: 0.2s;
21+
}
22+
button {
23+
background: #3498db;
24+
color: #fff;
25+
cursor: pointer;
26+
font-size: 16px;
27+
}
28+
h1 {
29+
text-shadow: -7px 10px 7px rgb(67 57 57 / 76%);
30+
}
31+
button:hover {
32+
background: #c9913d;
33+
}
34+
input:focus {
35+
outline: none;
36+
border-color: #3498db;
37+
}
38+
39+
a:link {
40+
color: #fd5723;
41+
}
42+
a:active {
43+
color: #fd5723;
44+
}
45+
a:visited {
46+
color: #fd5723;
47+
}
48+
a:hover {
49+
color: #f0bcac;
50+
}
51+
span {
52+
color:#d69d48;
53+
font-size: larger;
54+
}
55+
</style>
56+
</head>
57+
<body>
58+
<h3>Web App Multi-Client Example</h3>
59+
<br />
60+
<span id="status">Connecting...</span>
61+
<br />
62+
<br />
63+
You are user numer <span id="userNumber">0</span>
64+
<br />
65+
<br />
66+
Your connection numer is <span id="connectionNumber">0</span>
67+
<br />
68+
<br />
69+
There is <span id="userCount">0</span> users connected, and <span id="tabCount">0</span> tab opened.
70+
<br />
71+
<br />
72+
Current user input: <input id="privateInput"></input> <button OnClick="save(document.getElementById('privateInput').value)">Save</button> <a href="">Reload This Page</a>
73+
<br />
74+
<br />
75+
All users input: <input id="publicInput"></input> <button OnClick="saveAll(document.getElementById('publicInput').value);">Update All Users</button>
76+
<br />
77+
<br />
78+
<a href="" target="_blank">Open New Tab</a>
79+
<br />
80+
<br />
81+
<button OnClick="exit();">Exit</button>
82+
<br />
83+
<br />
84+
<br />
85+
Note: <br /><em>Copy URL, and open it in a private window, or another web browser to create new users.</em>
86+
</body>
87+
88+
<!-- Connect this window to the background app -->
89+
<script src="/webui.js"></script>
90+
91+
<script>
92+
// JavaScript Example
93+
/*
94+
document.addEventListener('DOMContentLoaded', function() {
95+
// DOM is loaded. Check if `webui` object is available
96+
if (typeof webui !== 'undefined') {
97+
// Set events callback
98+
webui.setEventCallback((e) => {
99+
if (e == webui.event.CONNECTED) {
100+
// Connection to the backend is established
101+
console.log('Connected.');
102+
webuiTest();
103+
} else if (e == webui.event.DISCONNECTED) {
104+
// Connection to the backend is lost
105+
console.log('Disconnected.');
106+
}
107+
});
108+
} else {
109+
// The virtual file `webui.js` is not included
110+
alert('Please add webui.js to your HTML.');
111+
}
112+
});
113+
114+
function webuiTest() {
115+
// Call a backend function
116+
if (webui.isConnected()) {
117+
118+
// When you bind a func in the backend
119+
// webui will create the `func` object
120+
// in three places:
121+
//
122+
// Global : func(...)
123+
// Property : webui.func(...)
124+
// Method : webui.call('func', ...)
125+
//
126+
// [!] Note: Objects creation fails when
127+
// a similar object already exist.
128+
129+
const foo = 'Hello';
130+
const bar = 123456;
131+
132+
// Calling as global object
133+
myBackendFunction(foo, bar).then((response) => {
134+
// Do something with `response`
135+
});
136+
137+
// Calling as property of `webui.` object
138+
webui.myBackendFunction(foo, bar).then((response) => {
139+
// Do something with `response`
140+
});
141+
142+
// Calling using the method `webui.call()`
143+
webui.call('myBackendFunction', foo, bar).then((response) => {
144+
// Do something with `response`
145+
});
146+
147+
// Using await
148+
// const response = await myBackendFunction(foo, bar);
149+
// const response = await webui.myBackendFunction(foo, bar);
150+
// const response = await webui.call('myBackendFunction', foo, bar);
151+
}
152+
}
153+
*/
154+
</script>
155+
</html>

0 commit comments

Comments
 (0)