Ind.ie is now Small Technology Foundation.
Commit cdc59d2d authored by Aral Balkan's avatar Aral Balkan

Update the chat example to match the simple chat tutorial

parent e1124eb2
......@@ -889,7 +889,9 @@ socket.onmessage = message => console.log(message.data)
socket.send('Hello!')
```
For a slightly more sophisticated example that doesn’t broadcast a client’s own messages to itself and selectively broadcasts to only the clients in the same “rooms”, see the [Basic Chat example](examples/wss-basic-chat). Here’s the code for the server component of that example:
For a slightly more sophisticated example that doesn’t broadcast a client’s own messages to itself and selectively broadcasts to only the clients in the same “rooms”, see the [Simple Chat example](examples/simple-chat). And here’s [a step-by-step tutorial](https://ar.al/2019/10/11/build-a-simple-chat-app-with-site.js/) that takes you through how to build it.
Here’s a simplified listing of the code for the server component of this example:
```js
module.exports = function (client, request) {
......
......@@ -12,17 +12,40 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic chat app with Site.js</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic chat app with Site.js</title>
<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; padding: 1em; }
body {
font-family: sans-serif;
padding: 1em;
}
h1 { margin-top: 0; }
form {
background: #eee;
display: grid;
grid-template-columns: [labels] auto [controls] 1fr;
align-items: center;
grid-row-gap: 0.5em;
grid-column-gap: 0.5em;
padding: 0.75em;
}
form > label { grid-column: labels; }
form > input, form > button {
grid-column: controls;
min-width: 6em;
max-width: 300px;
padding: 0.5em;
font-size: 1em;
}
button {
text-align: center;
cursor: pointer;
......@@ -48,26 +71,6 @@
background-color: #ccc;
}
form {
background: #eee;
display: grid;
grid-template-columns: [labels] auto [controls] 1fr;
align-items: center;
grid-row-gap: 0.5em;
grid-column-gap: 0.5em;
padding: 0.75em;
}
form > label { grid-column: labels; }
form > input, form > button {
grid-column: controls;
min-width: 6em;
max-width: 300px;
padding: 0.5em;
font-size: 1em;
}
#messages {
height: 10em;
overflow-y: scroll;
......@@ -81,7 +84,7 @@
<h1>Chat room</h1>
<p>Status: <span id='status' style="color: red;">Offline</span></p>
<form id='message-form'>
<label for='message'>Nickname:</label>
<label for='nickname'>Nickname:</label>
<input id='nickname' name='nickname' value='Anonymous'>
<label for='message'>Message:</label>
<input id='message' name='message' value=''>
......@@ -90,6 +93,7 @@
<h2>Messages</h2>
<ul id='messages'></ul>
<script>
// Shorthand for basic DOM lookup via CSS selectors.
const element = document.querySelector.bind(document)
......@@ -108,7 +112,7 @@
// Is the passed object a valid string?
function isValidString(s) {
return Boolean(s) // Isn’t null, undefined, '', or 0
return Boolean(s) // Not null, undefined, '', or 0
&& typeof s === 'string' // and is the correct type
&& s.replace(/\s/g, '') !== '' // and is not just whitespace.
}
......@@ -129,7 +133,7 @@
// Display the state of the connection.
socket.onopen = _ => {
element('#status').innerHTML =
element('#status').innerHTML =
'<span style="color: green">Online</span>'
}
......@@ -180,6 +184,7 @@
message = JSON.parse(message.data)
displayMessage(message)
}
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment