forked from
fogtype.com/_
プレイグラウンド、サンドボックス、使い捨てスクリプト置き場
Add 'socketio/' from commit 'ea8bce768f3f83264607b84db2fb2208ac105407'
git-subtree-dir: socketio
git-subtree-mainline: b755568571d51e50f38da2ae12c0fa79d70d3a0c
git-subtree-split: ea8bce768f3f83264607b84db2fb2208ac105407
Kohei Watanabe
(Jul 21, 2020, 12:45 AM +0900)
5886ef93
b7555685
+86
+17
socketio/package.json
+17
socketio/package.json
···
1
+
{
2
+
"name": "socket-io-example",
3
+
"version": "1.0.0",
4
+
"description": "",
5
+
"main": "src/index.js",
6
+
"scripts": {
7
+
"start": "nodemon src/index.js"
8
+
},
9
+
"dependencies": {
10
+
"express": "4.17.1",
11
+
"socket.io": "2.3.0"
12
+
},
13
+
"devDependencies": {
14
+
"nodemon": "1.18.4"
15
+
},
16
+
"keywords": []
17
+
}
+19
socketio/src/index.js
+19
socketio/src/index.js
···
1
+
// @ts-check
2
+
const path = require("path");
3
+
const app = require("express")();
4
+
const http = require("http").createServer(app);
5
+
const io = require("socket.io")(http);
6
+
7
+
const port = Number(process.env.PORT) || 8080;
8
+
9
+
app.get("/", function(_, res) {
10
+
res.sendFile(path.join(__dirname, "public", "index.html"));
11
+
});
12
+
13
+
http.listen(port, function() {
14
+
console.log(`listening on http://localhost:${port}`);
15
+
});
16
+
17
+
io.on("connect", socket => {
18
+
socket.on("message", message => io.send(message));
19
+
});
+50
socketio/src/public/index.html
+50
socketio/src/public/index.html
···
1
+
<!DOCTYPE html>
2
+
<html lang="ja">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width" />
6
+
<title>Demo</title>
7
+
<script src="/socket.io/socket.io.js"></script>
8
+
<script type="module">
9
+
const socket = io();
10
+
11
+
socket.on("message", message => {
12
+
const messages = document.body.querySelector(".messages");
13
+
if (messages == null) return;
14
+
const p = document.createElement("p");
15
+
messages.append(p);
16
+
p.textContent = message;
17
+
});
18
+
19
+
document.body.querySelector("form").addEventListener("submit", event => {
20
+
event.preventDefault();
21
+
socket.send(new FormData(event.target).get("message"));
22
+
event.target.querySelectorAll("input").forEach(input => {
23
+
input.value = "";
24
+
});
25
+
});
26
+
</script>
27
+
</head>
28
+
<body>
29
+
<p class="messages"></p>
30
+
<form>
31
+
<input
32
+
type="text"
33
+
name="message"
34
+
autofocus
35
+
autocomplete="off"
36
+
size="40"
37
+
/>
38
+
</form>
39
+
<p class="description">
40
+
Developer Tools のコンソール (Ctrl+Shift+J や Cmd+Opt+J) を開いて次のコードを実行する:
41
+
<p>
42
+
メッセージを送るためのコードの例:
43
+
<pre>io().send("こんにちは")</pre>
44
+
</p>
45
+
<p>
46
+
メッセージを受け取るためのコードの例:
47
+
<pre>io().on("message", message => { document.body.textContent = message; })</pre>
48
+
</p>
49
+
</body>
50
+
</html>