nebel/_
1
0
Fork 0
mirror of https://github.com/kou029w/_.git synced 2025-01-30 22:08:02 +00:00
Code Issues Projects Releases Wiki Activity

Initial commit

Browse source
This commit is contained in:
Nebel 2020-03-24 19:14:25 +09:00
parent 0547039150
commit ea8bce768f
4 changed files with 86 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -1,2 +0,0 @@
# socket-io-example
Created with CodeSandbox

17
package.json Normal file
View file

@ -0,0 +1,17 @@
{
"name": "socket-io-example",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "nodemon src/index.js"
},
"dependencies": {
"express": "4.17.1",
"socket.io": "2.3.0"
},
"devDependencies": {
"nodemon": "1.18.4"
},
"keywords": []
}

19
src/index.js Normal file
View file

@ -0,0 +1,19 @@
// @ts-check
const path = require("path");
const app = require("express")();
const http = require("http").createServer(app);
const io = require("socket.io")(http);
const port = Number(process.env.PORT) || 8080;
app.get("/", function(_, res) {
res.sendFile(path.join(__dirname, "public", "index.html"));
});
http.listen(port, function() {
console.log(`listening on http://localhost:${port}`);
});
io.on("connect", socket => {
socket.on("message", message => io.send(message));
});

50
src/public/index.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Demo</title>
<script src="/socket.io/socket.io.js"></script>
<script type="module">
const socket = io();
socket.on("message", message => {
const messages = document.body.querySelector(".messages");
if (messages == null) return;
const p = document.createElement("p");
messages.append(p);
p.textContent = message;
});
document.body.querySelector("form").addEventListener("submit", event => {
event.preventDefault();
socket.send(new FormData(event.target).get("message"));
event.target.querySelectorAll("input").forEach(input => {
input.value = "";
});
});
</script>
</head>
<body>
<p class="messages"></p>
<form>
<input
type="text"
name="message"
autofocus
autocomplete="off"
size="40"
/>
</form>
<p class="description">
Developer Tools のコンソール (Ctrl+Shift+J や Cmd+Opt+J) を開いて次のコードを実行する:
<p>
メッセージを送るためのコードの例:
<pre>io().send("こんにちは")</pre>
</p>
<p>
メッセージを受け取るためのコードの例:
<pre>io().on("message", message => { document.body.textContent = message; })</pre>
</p>
</body>
</html>