New example - web_app_multi_client

webui-dev · Jul 5, 2024 · 56f787c · 56f787c
1 parent 6ca7601
commit 56f787c
Show file tree

Hide file tree

Showing 4 changed files with 492 additions and 0 deletions.
diff --git a/examples/C/web_app_multi_client/GNUmakefile b/examples/C/web_app_multi_client/GNUmakefile
@@ -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
diff --git a/examples/C/web_app_multi_client/Makefile b/examples/C/web_app_multi_client/Makefile
@@ -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
diff --git a/examples/C/web_app_multi_client/index.html b/examples/C/web_app_multi_client/index.html
@@ -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>