Skip to content

Commit 3641b6e

Browse files
dmjiodmjio
committed
WebSocket example update
1 parent 5567938 commit 3641b6e

File tree

9 files changed

+553
-86
lines changed

9 files changed

+553
-86
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
dist-*
22
public
3+
*~
34

‎Makefile‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
.PHONY= update build optim
32

43
all: clean update build optim
@@ -9,7 +8,8 @@ update:
98
build:
109
wasm32-wasi-cabal build
1110
rm -rf public
12-
cp -r static public
11+
cp -rv static public
12+
cp -rv assets/ public
1313
$(eval my_wasm=$(shell wasm32-wasi-cabal list-bin app | tail -n 1))
1414
$(shell wasm32-wasi-ghc --print-libdir)/post-link.mjs --input $(my_wasm) --output public/ghc_wasm_jsffi.js
1515
cp -v $(my_wasm) public/

‎assets/style.css‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
:root {
2+
--primary-color: #4361ee;
3+
--secondary-color: #3f37c9;
4+
--success-color: #4cc9f0;
5+
--danger-color: #f72585;
6+
--light-color: #f8f9fa;
7+
--dark-color: #212529;
8+
--border-radius: 8px;
9+
--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
10+
}
11+
12+
* {
13+
box-sizing: border-box;
14+
margin: 0;
15+
padding: 0;
16+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17+
}
18+
19+
body {
20+
background-color: #f5f7fa;
21+
color: var(--dark-color);
22+
padding: 20px;
23+
line-height: 1.6;
24+
}
25+
26+
.container {
27+
max-width: 1200px;
28+
margin: 0 auto;
29+
}
30+
31+
h1 {
32+
text-align: center;
33+
margin-bottom: 30px;
34+
color: var(--primary-color);
35+
}
36+
37+
.controls {
38+
display: flex;
39+
justify-content: center;
40+
margin-bottom: 30px;
41+
}
42+
43+
.btn {
44+
padding: 10px 20px;
45+
border: none;
46+
border-radius: var(--border-radius);
47+
cursor: pointer;
48+
font-weight: 600;
49+
transition: all 0.3s ease;
50+
}
51+
52+
.btn-primary {
53+
background-color: var(--primary-color);
54+
color: white;
55+
}
56+
57+
.btn-primary:hover {
58+
background-color: var(--secondary-color);
59+
transform: translateY(-2px);
60+
}
61+
62+
.btn-danger {
63+
background-color: var(--danger-color);
64+
color: white;
65+
}
66+
67+
.btn-danger:hover {
68+
opacity: 0.9;
69+
transform: translateY(-2px);
70+
}
71+
72+
.btn-success {
73+
background-color: var(--success-color);
74+
color: var(--dark-color);
75+
}
76+
77+
.btn-success:hover {
78+
opacity: 0.9;
79+
transform: translateY(-2px);
80+
}
81+
82+
.btn-close {
83+
background: none;
84+
border: none;
85+
color: #6c757d;
86+
font-size: 1.2rem;
87+
cursor: pointer;
88+
padding: 0 5px;
89+
transition: color 0.2s;
90+
}
91+
92+
.btn-close:hover {
93+
color: var(--danger-color);
94+
}
95+
96+
.websockets-container {
97+
display: grid;
98+
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
99+
gap: 20px;
100+
}
101+
102+
.websocket-box {
103+
background-color: white;
104+
border-radius: var(--border-radius);
105+
padding: 20px;
106+
box-shadow: var(--box-shadow);
107+
display: flex;
108+
flex-direction: column;
109+
height: 100%;
110+
position: relative;
111+
}
112+
113+
.websocket-header {
114+
display: flex;
115+
justify-content: space-between;
116+
align-items: center;
117+
margin-bottom: 15px;
118+
padding-bottom: 10px;
119+
border-bottom: 1px solid #eee;
120+
}
121+
122+
.websocket-id {
123+
font-weight: bold;
124+
color: var(--primary-color);
125+
}
126+
127+
.websocket-status {
128+
display: inline-block;
129+
width: 12px;
130+
height: 12px;
131+
border-radius: 50%;
132+
margin-right: 8px;
133+
}
134+
135+
.status-connected {
136+
background-color: #4ade80;
137+
}
138+
139+
.status-disconnected {
140+
background-color: #f87171;
141+
}
142+
143+
.websocket-controls {
144+
display: flex;
145+
gap: 10px;
146+
margin-bottom: 15px;
147+
}
148+
149+
.websocket-input {
150+
display: flex;
151+
gap: 10px;
152+
margin-bottom: 15px;
153+
}
154+
155+
.input-field {
156+
flex: 1;
157+
padding: 10px;
158+
border: 1px solid #ddd;
159+
border-radius: var(--border-radius);
160+
font-size: 16px;
161+
}
162+
163+
.input-field:focus {
164+
outline: none;
165+
border-color: var(--primary-color);
166+
}
167+
168+
.messages-list {
169+
flex: 1;
170+
overflow-y: auto;
171+
padding: 10px;
172+
background-color: #f8f9fa;
173+
border-radius: var(--border-radius);
174+
max-height: 300px;
175+
min-height: 100px;
176+
}
177+
178+
.message {
179+
padding: 8px 12px;
180+
margin-bottom: 8px;
181+
border-radius: var(--border-radius);
182+
background-color: white;
183+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
184+
word-break: break-word;
185+
}
186+
187+
.message-client {
188+
border-left: 4px solid var(--primary-color);
189+
}
190+
191+
.message-server {
192+
border-left: 4px solid var(--success-color);
193+
}
194+
195+
.message-info {
196+
border-left: 4px solid #6c757d;
197+
}
198+
199+
.message-header {
200+
display: flex;
201+
justify-content: space-between;
202+
margin-bottom: 4px;
203+
font-size: 0.85rem;
204+
}
205+
206+
.message-origin {
207+
font-weight: bold;
208+
}
209+
210+
.message-client .message-origin {
211+
color: var(--primary-color);
212+
}
213+
214+
.message-server .message-origin {
215+
color: var(--success-color);
216+
}
217+
218+
.message-info .message-origin {
219+
color: #6c757d;
220+
}
221+
222+
.timestamp {
223+
color: #6c757d;
224+
}
225+
226+
.message-content {
227+
font-size: 0.95rem;
228+
}
229+
230+
.empty-state {
231+
color: #6c757d;
232+
text-align: center;
233+
padding: 20px;
234+
}

‎cabal.project‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@ flags: +template-haskell
99
source-repository-package
1010
type: git
1111
location: https://github.com/dmjio/miso
12-
tag: 8c4b85e6e1279bec9b66859c54f25209701b8153
12+
tag: 62c1816d75e7a21ef0f9cb78d472cfa9e6fa30b4

‎flake.lock‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎miso-websocket.cabal‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,12 @@ executable app
1818
wasm, warnings
1919
hs-source-dirs:
2020
src
21+
other-modules:
22+
WebSocket
2123
main-is:
2224
Main.hs
2325
build-depends:
24-
base, aeson, miso, mtl
26+
base, aeson, miso, mtl, jsaddle, containers
2527
default-language:
2628
GHC2021
2729
default-extensions:

0 commit comments

Comments
 (0)