Skip to content

Commit 2c82833

Browse files
nhooyrnhooyr
committed
Make chat example responsive
1 parent bdae16e commit 2c82833

File tree

5 files changed

+53
-29
lines changed

5 files changed

+53
-29
lines changed

‎example/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ of a simple chat webapp using nhooyr.io/websocket.
55

66
```bash
77
$ cd example
8-
$ go run .
8+
$ go run . localhost:0
99
listening on http://127.0.0.1:51055
1010
```
1111

‎example/index.css‎

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
body {
22
width: 100vw;
3-
height: 100vh;
43
min-width: 320px;
54
}
65

76
#root {
8-
padding: 20px;
9-
max-width: 500px;
7+
padding: 40px 20px;
8+
max-width: 480px;
109
margin: auto;
11-
max-height: 100vh;
10+
height: 100vh;
1211

1312
display: flex;
1413
flex-direction: column;
@@ -20,42 +19,57 @@ body {
2019
margin: 20px 0 0 0;
2120
}
2221

22+
/* 100vh on safari does not include the bottom bar. */
23+
@supports (-webkit-overflow-scrolling: touch) {
24+
#root {
25+
height: 85vh;
26+
}
27+
}
28+
2329
#message-log {
2430
width: 100%;
25-
height: 100vh;
2631
flex-grow: 1;
2732
overflow: auto;
2833
}
2934

3035
#message-log p:first-child {
31-
margin-top: 0;
32-
margin-bottom: 0;
36+
margin: 0;
3337
}
3438

3539
#message-log > * + * {
3640
margin: 10px 0 0 0;
3741
}
3842

39-
#publish-form {
40-
appearance: none;
43+
#publish-form-container {
44+
width: 100%;
45+
}
4146

42-
display: flex;
43-
align-items: center;
44-
justify-content: center;
47+
#publish-form {
4548
width: 100%;
49+
display: flex;
50+
height: 40px;
51+
}
52+
53+
#publish-form > * + * {
54+
margin: 0 0 0 10px;
4655
}
4756

4857
#publish-form input[type="text"] {
4958
flex-grow: 1;
59+
60+
-moz-appearance: none;
61+
-webkit-appearance: none;
5062
word-break: normal;
5163
border-radius: 5px;
64+
border: 1px solid #ccc;
5265
}
5366

5467
#publish-form input[type="submit"] {
5568
color: white;
5669
background-color: black;
5770
border-radius: 5px;
58-
margin-left: 10px;
71+
padding: 5px 10px;
72+
border: none;
5973
}
6074

6175
#publish-form input[type="submit"]:hover {

‎example/index.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,20 @@
55
<title>nhooyr.io/websocket - Chat Example</title>
66
<meta name="viewport" content="width=device-width" />
77

8-
<link href="/index.css" rel="stylesheet" />
98
<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
109
<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
1110
<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
11+
<link href="/index.css" rel="stylesheet" />
1212
</head>
1313
<body>
1414
<div id="root">
1515
<div id="message-log"></div>
16-
<form id="publish-form">
17-
<input name="message" id="message-input" type="text" />
18-
<input type="submit" />
19-
</form>
16+
<div id="publish-form-container">
17+
<form id="publish-form">
18+
<input name="message" id="message-input" type="text" />
19+
<input type="submit" />
20+
</form>
21+
</div>
2022
</div>
2123
<script type="text/javascript" src="/index.js"></script>
2224
</body>

‎example/index.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,21 @@
44
function dial() {
55
conn = new WebSocket(`ws://${location.host}/subscribe`)
66

7-
conn.addEventListener("close", (ev) => {
8-
console.error("subscribe WebSocket closed", ev)
9-
console.info("reconnecting in 1000ms", ev)
7+
conn.addEventListener("close", ev => {
8+
console.info("websocket disconnected, reconnecting in 1000ms", ev)
109
setTimeout(dial, 1000)
1110
})
11+
conn.addEventListener("open", ev => {
12+
console.info("websocket connected")
13+
})
1214
conn.addEventListener("message", ev => {
1315
if (typeof ev.data !== "string") {
1416
console.error("unexpected message type", typeof ev.data)
1517
return
1618
}
17-
appendLog(ev.data)
19+
const p = appendLog(ev.data)
1820
if (expectingMessage) {
19-
messageLog.scrollTo(0, messageLog.scrollHeight)
21+
p.scrollIntoView()
2022
expectingMessage = false
2123
}
2224
})
@@ -31,6 +33,7 @@
3133
const p = document.createElement("p")
3234
p.innerText = `${new Date().toLocaleTimeString()}: ${text}`
3335
messageLog.append(p)
36+
return p
3437
}
3538
appendLog("Submit a message to get started!")
3639

@@ -47,8 +50,6 @@
4750
fetch("/publish", {
4851
method: "POST",
4952
body: msg,
50-
}).catch(err => {
51-
console.error("failed to publish", err)
5253
})
5354
}
5455
})()

‎example/main.go‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,33 @@
11
package main
22

33
import (
4-
"fmt"
4+
"errors"
55
"log"
66
"net"
77
"net/http"
8+
"os"
89
"time"
910
)
1011

1112
func main() {
13+
log.SetFlags(0)
14+
1215
err := run()
1316
if err != nil {
1417
log.Fatal(err)
1518
}
1619
}
1720

1821
func run() error {
19-
l, err := net.Listen("tcp", "localhost:0")
22+
if len(os.Args) < 2 {
23+
return errors.New("please provide an address to listen on as the first argument")
24+
}
25+
26+
l, err := net.Listen("tcp", os.Args[1])
2027
if err != nil {
2128
return err
2229
}
23-
fmt.Printf("listening on http://%v\n", l.Addr())
30+
log.Printf("listening on http://%v", l.Addr())
2431

2532
var ws chatServer
2633

0 commit comments

Comments
 (0)