teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

今回のエラーでは無関係かもしれませんが、index.htmlも追記しました。

2021/05/01 21:34

投稿

nemui_akubi
nemui_akubi

スコア11

title CHANGED
File without changes
body CHANGED
@@ -23,8 +23,8 @@
23
23
  ```
24
24
 
25
25
  ### 該当のソースコード
26
-
26
+ app.js
27
- ```ここに言語名を入力
27
+ ```javascript
28
28
  var http = require('http');
29
29
  var socketio = require('socket.io');
30
30
  var fs = require('fs');
@@ -41,7 +41,51 @@
41
41
  });
42
42
  });
43
43
  ```
44
+ index.html
45
+ ```
46
+ <!DOCTYPE html>
47
+ <html lang="ja">
48
+ <head>
49
+ <meta charset="utf-8">
50
+ <title>websocket-chat</title>
51
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
52
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
53
+ <script type="text/javascript" src="/socket.io/socket.io.js"></script>
54
+ </head>
55
+ <body>
56
+ <div class="container">
57
+ <h1>WebSocket-Chat</h1>
58
+ <form class="form-inline">
59
+ <div class="form-group">
60
+ <label for="msgForm">メッセージ:</label>
61
+ <input type="text" class="form-control" id="msgForm">
62
+ </div>
63
+ <button type="submit" class="btn btn-primary">送信</button>
64
+ </form>
65
+ <div id="chatLogs"></div>
66
+ </div>
67
+
68
+ <script type="text/javascript">
69
+ var socket = io.connect();
70
+
71
+ socket.on("server_to_client", function(data){appendMsg(data.value)});
72
+
73
+ function appendMsg(text) {
74
+ $("#chatLogs").append("<div>" + text + "</div>");
75
+ }
76
+
77
+ $("form").submit(function(e){
78
+ var message = $("#msgForm").val();
79
+ $("#msgForm").val('');
80
+ socket.emit("client_to_server", {value : message});
81
+ e.preventDefault();
82
+ });
83
+ </script>
84
+ </body>
85
+ </html>
86
+ ```
44
87
 
88
+
45
89
  ### 試したこと
46
90
 
47
91
  socket.ioの導入が失敗しているのかと思いましたが、