mirror of
https://github.com/webui-dev/webui
synced 2025-03-28 21:13:17 +00:00
New example - web_app_multi_client
This commit is contained in:
Hassan DRAGA
parent
6ca760163e
commit
56f787cf73
141
examples/C/web_app_multi_client/GNUmakefile
Normal file
141
examples/C/web_app_multi_client/GNUmakefile
Normal file
@ -0,0 +1,141 @@
|
||||
# WebUI C Example
|
||||
|
||||
# == 1. VARIABLES =============================================================
|
||||
|
||||
MAKEFILE_PATH := $(abspath $(lastword $(MAKEFILE_LIST)))
|
||||
PROJECT_DIR := $(dir $(MAKEFILE_PATH))/../../../
|
||||
TARGET := $(firstword $(MAKECMDGOALS))
|
||||
LIB_DIR := $(PROJECT_DIR)/dist
|
||||
ifeq ($(TARGET), debug)
|
||||
LIB_DIR := $(LIB_DIR)/debug
|
||||
endif
|
||||
INCLUDE_DIR := $(PROJECT_DIR)/include
|
||||
WEBUI_LIB_NAME = webui-2
|
||||
ifeq ($(WEBUI_USE_TLS), 1)
|
||||
WEBUI_LIB_NAME = webui-2-secure
|
||||
endif
|
||||
|
||||
# ARGS
|
||||
# Set a compiler when running on Linux via `make CC=gcc` / `make CC=clang`
|
||||
CC = gcc
|
||||
# Build the WebUI library if running via `make BUILD_LIB=true`
|
||||
BUILD_LIB ?=
|
||||
|
||||
# BUILD FLAGS
|
||||
STATIC_BUILD_FLAGS = main.c -I"$(INCLUDE_DIR)" -L"$(LIB_DIR)"
|
||||
DYN_BUILD_FLAGS = main.c -I"$(INCLUDE_DIR)" -L"$(LIB_DIR)"
|
||||
|
||||
# Platform conditions
|
||||
ifeq ($(OS),Windows_NT)
|
||||
# Windows
|
||||
PLATFORM := windows
|
||||
SHELL := CMD
|
||||
STATIC_BUILD_FLAGS += -l$(WEBUI_LIB_NAME)-static -lws2_32 -Wall -luser32 -static
|
||||
COPY_LIB_CMD := @copy "$(LIB_DIR)\$(WEBUI_LIB_NAME).dll" "$(WEBUI_LIB_NAME).dll"
|
||||
DYN_BUILD_FLAGS += "$(WEBUI_LIB_NAME).dll" -lws2_32 -Wall -luser32
|
||||
STATIC_OUT := main.exe
|
||||
DYN_OUT := main-dyn.exe
|
||||
LWS2_OPT := -lws2_32 -lOle32
|
||||
STRIP_OPT := --strip-all
|
||||
CONSOLE_APP := -Wl,-subsystem=console
|
||||
GUI_APP := -Wl,-subsystem=windows
|
||||
else
|
||||
STATIC_BUILD_FLAGS += -lpthread -lm -l$(WEBUI_LIB_NAME)-static
|
||||
DYN_BUILD_FLAGS += -lpthread -lm
|
||||
STATIC_OUT := main
|
||||
DYN_OUT := main-dyn
|
||||
ifeq ($(shell uname),Darwin)
|
||||
# MacOS
|
||||
PLATFORM := macos
|
||||
CC = clang
|
||||
COPY_LIB_CMD := @cp "$(LIB_DIR)/$(WEBUI_LIB_NAME).dylib" "$(WEBUI_LIB_NAME).dylib"
|
||||
DYN_BUILD_FLAGS += "./$(WEBUI_LIB_NAME).dylib"
|
||||
WKWEBKIT_LINK_FLAGS := -framework Cocoa -framework WebKit
|
||||
else
|
||||
# Linux
|
||||
PLATFORM := linux
|
||||
COPY_LIB_CMD := @cp "$(LIB_DIR)/$(WEBUI_LIB_NAME).so" "$(WEBUI_LIB_NAME).so"
|
||||
STATIC_BUILD_FLAGS += -ldl
|
||||
DYN_BUILD_FLAGS += -ldl "./$(WEBUI_LIB_NAME).so"
|
||||
STRIP_OPT := --strip-all
|
||||
ifeq ($(CC),clang)
|
||||
LLVM_OPT := llvm-
|
||||
endif
|
||||
endif
|
||||
endif
|
||||
|
||||
# == 2.TARGETS ================================================================
|
||||
|
||||
all: release
|
||||
|
||||
debug: --validate-args
|
||||
ifeq ($(BUILD_LIB),true)
|
||||
@cd "$(PROJECT_DIR)" && $(MAKE) debug
|
||||
endif
|
||||
# Static with Debug info
|
||||
ifneq ($(WEBUI_USE_TLS), 1)
|
||||
@echo "Build C Example ($(CC) debug static)..."
|
||||
@$(CC) -g $(CONSOLE_APP) $(STATIC_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(STATIC_OUT)
|
||||
endif
|
||||
# Dynamic with Debug info
|
||||
@echo "Build C Example ($(CC) debug dynamic)..."
|
||||
$(COPY_LIB_CMD)
|
||||
@$(CC) -g $(CONSOLE_APP) $(DYN_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(DYN_OUT)
|
||||
# Clean
|
||||
ifeq ($(PLATFORM),windows)
|
||||
@- del *.o >nul 2>&1
|
||||
else
|
||||
@- rm -f *.o
|
||||
@- rm -rf *.dSYM # macOS
|
||||
endif
|
||||
@echo "Done."
|
||||
|
||||
release: --validate-args
|
||||
ifeq ($(BUILD_LIB),true)
|
||||
@cd "$(PROJECT_DIR)" && $(MAKE)
|
||||
endif
|
||||
# Static Release
|
||||
ifneq ($(WEBUI_USE_TLS), 1)
|
||||
@echo "Build C Example ($(CC) release static)..."
|
||||
@$(CC) -Os $(GUI_APP) $(STATIC_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(STATIC_OUT)
|
||||
@$(LLVM_OPT)strip $(STRIP_OPT) $(STATIC_OUT)
|
||||
endif
|
||||
# Dynamic Release
|
||||
@echo "Build C Example ($(CC) release dynamic)..."
|
||||
$(COPY_LIB_CMD)
|
||||
@$(CC) $(GUI_APP) $(DYN_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(DYN_OUT)
|
||||
@$(LLVM_OPT)strip $(STRIP_OPT) $(DYN_OUT)
|
||||
# Clean
|
||||
ifeq ($(PLATFORM),windows)
|
||||
@- del *.o >nul 2>&1
|
||||
else
|
||||
@- rm -f *.o
|
||||
@- rm -rf *.dSYM # macOS
|
||||
endif
|
||||
@echo "Done."
|
||||
|
||||
clean: --clean-$(PLATFORM)
|
||||
|
||||
# INTERNAL TARGETS
|
||||
|
||||
--validate-args:
|
||||
ifneq ($(filter $(CC),gcc clang aarch64-linux-gnu-gcc arm-linux-gnueabihf-gcc musl-gcc),$(CC))
|
||||
$(error Invalid compiler specified: `$(CC)`)
|
||||
endif
|
||||
|
||||
--clean-linux: --clean-unix
|
||||
|
||||
--clean-macos: --clean-unix
|
||||
|
||||
--clean-unix:
|
||||
- rm -f *.o
|
||||
- rm -f *.a
|
||||
- rm -f *.so
|
||||
- rm -f *.dylib
|
||||
- rm -rf *.dSYM
|
||||
|
||||
--clean-windows:
|
||||
- del *.o >nul 2>&1
|
||||
- del *.dll >nul 2>&1
|
||||
- del *.a >nul 2>&1
|
||||
- del *.exe >nul 2>&1
|
||||
64
examples/C/web_app_multi_client/Makefile
Normal file
64
examples/C/web_app_multi_client/Makefile
Normal file
@ -0,0 +1,64 @@
|
||||
# WebUI C Example
|
||||
# Windows - Microsoft Visual C
|
||||
|
||||
SHELL = CMD
|
||||
LIB_DIR = ../../../dist
|
||||
INCLUDE_DIR = ../../../include
|
||||
WEBUI_LIB_NAME = webui-2
|
||||
!IF "$(WEBUI_USE_TLS)" == "1"
|
||||
WEBUI_LIB_NAME = webui-2-secure
|
||||
!ENDIF
|
||||
|
||||
# Build the WebUI library if running `nmake BUILD_LIB=true`
|
||||
BUILD_LIB =
|
||||
|
||||
all: release
|
||||
|
||||
debug:
|
||||
!IF "$(BUILD_LIB)" == "true"
|
||||
@cd "$(LIB_DIR)" && cd .. && $(MAKE) debug
|
||||
!ENDIF
|
||||
# Static with Debug info
|
||||
!IF "$(WEBUI_USE_TLS)" != "1"
|
||||
@echo Build C Example (Static Debug)...
|
||||
@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
|
||||
!ENDIF
|
||||
# Dynamic with Debug info
|
||||
@echo Build C Example (Dynamic Debug)...
|
||||
@copy "$(LIB_DIR)\debug\$(WEBUI_LIB_NAME).dll" "$(WEBUI_LIB_NAME).dll"
|
||||
@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
|
||||
# Clean
|
||||
@- del *.exp >nul 2>&1
|
||||
@- del *.ilk >nul 2>&1
|
||||
@- del *.lib >nul 2>&1
|
||||
@- del *.obj >nul 2>&1
|
||||
@echo Done.
|
||||
|
||||
release:
|
||||
!IF "$(BUILD_LIB)" == "true"
|
||||
@cd "$(LIB_DIR)" && cd .. && $(MAKE)
|
||||
!ENDIF
|
||||
# Static Release
|
||||
!IF "$(WEBUI_USE_TLS)" != "1"
|
||||
@echo Build C Example (Static Release)...
|
||||
@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
|
||||
!ENDIF
|
||||
# Dynamic Release
|
||||
@echo Build C Example (Dynamic Release)...
|
||||
@copy "$(LIB_DIR)\$(WEBUI_LIB_NAME).dll" "$(WEBUI_LIB_NAME).dll"
|
||||
@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
|
||||
# Clean
|
||||
@- del *.exp >nul 2>&1
|
||||
@- del *.ilk >nul 2>&1
|
||||
@- del *.lib >nul 2>&1
|
||||
@- del *.obj >nul 2>&1
|
||||
@- del *.pdb >nul 2>&1
|
||||
@echo Done.
|
||||
|
||||
clean:
|
||||
- del *.obj >nul 2>&1
|
||||
- del *.ilk >nul 2>&1
|
||||
- del *.pdb >nul 2>&1
|
||||
- del *.exp >nul 2>&1
|
||||
- del *.exe >nul 2>&1
|
||||
- del *.lib >nul 2>&1
|
||||
155
examples/C/web_app_multi_client/index.html
Normal file
155
examples/C/web_app_multi_client/index.html
Normal file
@ -0,0 +1,155 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>WebUI - Web App Multi-Client Example</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: white;
|
||||
background: linear-gradient(to right, #507d91, #1c596f, #022737);
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
button,
|
||||
input {
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
|
||||
transition: 0.2s;
|
||||
}
|
||||
button {
|
||||
background: #3498db;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
h1 {
|
||||
text-shadow: -7px 10px 7px rgb(67 57 57 / 76%);
|
||||
}
|
||||
button:hover {
|
||||
background: #c9913d;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #fd5723;
|
||||
}
|
||||
a:active {
|
||||
color: #fd5723;
|
||||
}
|
||||
a:visited {
|
||||
color: #fd5723;
|
||||
}
|
||||
a:hover {
|
||||
color: #f0bcac;
|
||||
}
|
||||
span {
|
||||
color:#d69d48;
|
||||
font-size: larger;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>Web App Multi-Client Example</h3>
|
||||
<br />
|
||||
<span id="status">Connecting...</span>
|
||||
<br />
|
||||
<br />
|
||||
You are user numer <span id="userNumber">0</span>
|
||||
<br />
|
||||
<br />
|
||||
Your connection numer is <span id="connectionNumber">0</span>
|
||||
<br />
|
||||
<br />
|
||||
There is <span id="userCount">0</span> users connected, and <span id="tabCount">0</span> tab opened.
|
||||
<br />
|
||||
<br />
|
||||
Current user input: <input id="privateInput"></input> <button OnClick="save(document.getElementById('privateInput').value)">Save</button> <a href="">Reload This Page</a>
|
||||
<br />
|
||||
<br />
|
||||
All users input: <input id="publicInput"></input> <button OnClick="saveAll(document.getElementById('publicInput').value);">Update All Users</button>
|
||||
<br />
|
||||
<br />
|
||||
<a href="" target="_blank">Open New Tab</a>
|
||||
<br />
|
||||
<br />
|
||||
<button OnClick="exit();">Exit</button>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
Note: <br /><em>Copy URL, and open it in a private window, or another web browser to create new users.</em>
|
||||
</body>
|
||||
|
||||
<!-- Connect this window to the background app -->
|
||||
<script src="/webui.js"></script>
|
||||
|
||||
<script>
|
||||
// JavaScript Example
|
||||
/*
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// DOM is loaded. Check if `webui` object is available
|
||||
if (typeof webui !== 'undefined') {
|
||||
// Set events callback
|
||||
webui.setEventCallback((e) => {
|
||||
if (e == webui.event.CONNECTED) {
|
||||
// Connection to the backend is established
|
||||
console.log('Connected.');
|
||||
webuiTest();
|
||||
} else if (e == webui.event.DISCONNECTED) {
|
||||
// Connection to the backend is lost
|
||||
console.log('Disconnected.');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// The virtual file `webui.js` is not included
|
||||
alert('Please add webui.js to your HTML.');
|
||||
}
|
||||
});
|
||||
|
||||
function webuiTest() {
|
||||
// Call a backend function
|
||||
if (webui.isConnected()) {
|
||||
|
||||
// When you bind a func in the backend
|
||||
// webui will create the `func` object
|
||||
// in three places:
|
||||
//
|
||||
// Global : func(...)
|
||||
// Property : webui.func(...)
|
||||
// Method : webui.call('func', ...)
|
||||
//
|
||||
// [!] Note: Objects creation fails when
|
||||
// a similar object already exist.
|
||||
|
||||
const foo = 'Hello';
|
||||
const bar = 123456;
|
||||
|
||||
// Calling as global object
|
||||
myBackendFunction(foo, bar).then((response) => {
|
||||
// Do something with `response`
|
||||
});
|
||||
|
||||
// Calling as property of `webui.` object
|
||||
webui.myBackendFunction(foo, bar).then((response) => {
|
||||
// Do something with `response`
|
||||
});
|
||||
|
||||
// Calling using the method `webui.call()`
|
||||
webui.call('myBackendFunction', foo, bar).then((response) => {
|
||||
// Do something with `response`
|
||||
});
|
||||
|
||||
// Using await
|
||||
// const response = await myBackendFunction(foo, bar);
|
||||
// const response = await webui.myBackendFunction(foo, bar);
|
||||
// const response = await webui.call('myBackendFunction', foo, bar);
|
||||
}
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
</html>
|
||||
132
examples/C/web_app_multi_client/main.c
Normal file
132
examples/C/web_app_multi_client/main.c
Normal file
@ -0,0 +1,132 @@
|
||||
// Web App Multi-Client Example
|
||||
|
||||
#include "webui.h"
|
||||
|
||||
// Arrays to hold permanent data
|
||||
char privateInput_arr[256][1024] = {0}; // One for each user
|
||||
char publicInput_arr[1024] = {0}; // One for all users
|
||||
int users_count = 0;
|
||||
int tab_count = 0;
|
||||
|
||||
void exit_app(webui_event_t* e) {
|
||||
// Close all opened windows
|
||||
webui_exit();
|
||||
}
|
||||
|
||||
void save(webui_event_t* e) {
|
||||
// Get input value
|
||||
const char* privateInput = webui_get_string(e);
|
||||
// Save it in the array
|
||||
snprintf(privateInput_arr[e->client_id], 1024, "%s", privateInput);
|
||||
}
|
||||
|
||||
void saveAll(webui_event_t* e) {
|
||||
// Get input value
|
||||
const char* publicInput = webui_get_string(e);
|
||||
// Save it in the array
|
||||
snprintf(publicInput_arr, 1024, "%s", publicInput);
|
||||
// Update all users
|
||||
char buffer[512] = {0};
|
||||
snprintf(buffer, sizeof(buffer), "document.getElementById(\"publicInput\").value = \"%s\";", publicInput);
|
||||
webui_run(e->window, buffer);
|
||||
}
|
||||
|
||||
void events(webui_event_t* e) {
|
||||
|
||||
// This function gets called every time
|
||||
// there is an event
|
||||
|
||||
// Full web browser cookies
|
||||
const char* cookies = e->cookies;
|
||||
|
||||
// Static client (Based on web browser cookies)
|
||||
size_t client_id = e->client_id;
|
||||
|
||||
// Dynamic client connection ID (Changes on connect/disconnect events)
|
||||
size_t connection_id = e->connection_id;
|
||||
|
||||
if (e->event_type == WEBUI_EVENT_CONNECTED) {
|
||||
// New connection
|
||||
if (users_count < (client_id + 1)) { // +1 because it start from 0
|
||||
users_count = (client_id + 1);
|
||||
}
|
||||
tab_count++;
|
||||
}
|
||||
else if (e->event_type == WEBUI_EVENT_DISCONNECTED) {
|
||||
// Disconnection
|
||||
if (tab_count > 0)
|
||||
tab_count--;
|
||||
}
|
||||
|
||||
// Buffer
|
||||
char buffer[512] = {0};
|
||||
|
||||
// Update this current user only
|
||||
|
||||
// status
|
||||
webui_run_client(e, "document.getElementById(\"status\").innerText = \"Connected!\";");
|
||||
|
||||
// userNumber
|
||||
snprintf(buffer, sizeof(buffer), "document.getElementById(\"userNumber\").innerText = \"%zu\";", client_id);
|
||||
webui_run_client(e, buffer);
|
||||
|
||||
// connectionNumber
|
||||
snprintf(buffer, sizeof(buffer), "document.getElementById(\"connectionNumber\").innerText = \"%zu\";", connection_id);
|
||||
webui_run_client(e, buffer);
|
||||
|
||||
// privateInput
|
||||
snprintf(buffer, sizeof(buffer), "document.getElementById(\"privateInput\").value = \"%s\";", privateInput_arr[client_id]);
|
||||
webui_run_client(e, buffer);
|
||||
|
||||
// publicInput
|
||||
snprintf(buffer, sizeof(buffer), "document.getElementById(\"publicInput\").value = \"%s\";", publicInput_arr);
|
||||
webui_run_client(e, buffer);
|
||||
|
||||
// Update all connected users
|
||||
|
||||
// userCount
|
||||
snprintf(buffer, sizeof(buffer), "document.getElementById(\"userCount\").innerText = \"%d\";", users_count);
|
||||
webui_run(e->window, buffer);
|
||||
|
||||
// tabCount
|
||||
snprintf(buffer, sizeof(buffer), "document.getElementById(\"tabCount\").innerText = \"%d\";", tab_count);
|
||||
webui_run(e->window, buffer);
|
||||
}
|
||||
|
||||
int main() {
|
||||
|
||||
// Allow multi-user connection
|
||||
webui_set_config(multi_client, true);
|
||||
|
||||
// Allow cookies
|
||||
webui_set_config(use_cookies, true);
|
||||
|
||||
// Create new window
|
||||
size_t win = webui_new_window();
|
||||
|
||||
// Bind HTML with a C functions
|
||||
webui_bind(win, "save", save);
|
||||
webui_bind(win, "saveAll", saveAll);
|
||||
webui_bind(win, "exit", exit);
|
||||
|
||||
// Bind all events
|
||||
webui_bind(win, "", events);
|
||||
|
||||
// Start server only
|
||||
const char* url = webui_start_server(win, "index.html");
|
||||
|
||||
// Open a new page in the default native web browser
|
||||
webui_open_url(url);
|
||||
|
||||
// Wait until all windows get closed
|
||||
webui_wait();
|
||||
|
||||
// Free all memory resources (Optional)
|
||||
webui_clean();
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
#if defined(_MSC_VER)
|
||||
int APIENTRY WinMain(HINSTANCE hInst, HINSTANCE hInstPrev, PSTR cmdline, int cmdshow) { return main(); }
|
||||
#endif
|
||||
Loading…
x
Reference in New Issue
Block a user