Q&A
expressとejsを使ったプロジェクトにsocket.ioを使おうと思い、
npm install socket.ioなどを使って導入してみましたが、
GET /socket.io/socket.io.js 404 9.336 ms - 1016と出て、socketが反応しません。
どのようにしたらsocket通信を行うことができるのか教えてください。
・index.ejs
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <head> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 7 <meta name="format-detection" content="telephone=no"> 8 <title><%= title %></title> 9 <link rel='stylesheet' href='/stylesheets/style.css' /> 10 </head> 11 <body> 12 <div class="wrapper"> 13 <form action="" method="post" class="board-form"> 14 スコア: <input type="text" name="score" id="score" class="input" required><br> 15 名前: <input type="text" name="user_name" id="user_name" class="input" required><br> 16 <br> 17 <button type="submit" id="score_post" class="submit">ボード作成</button> 18 </form> 19 <h1>TOP RANKING</h1> 20 <ul class="rank-list"> 21 <% Rank.forEach(function(scoreRank) { %> 22 <li class="main-list__item"> 23 <p class="board__title"><%= scoreRank.user_name %></p> 24 <p class="board__date"><%= scoreRank.score %>点</p> 25 </a> 26 </li> 27 <% }); %> 28 </ul> 29 <h1>NEW SCORE</h1> 30 <ul class="new-list"> 31 <% List.forEach(function(scoreList) { %> 32 <li class="main-list__item"> 33 <p class="board__title"><%= scoreList.user_name %></p> 34 <p class="board__date"><%= scoreList.score %>点</p> 35 </li> 36 <% }); %> 37 </ul> 38 <ul id="messages">socket.io 39 40 </ul> 41 </div> 42 <script src="/socket.io/socket.io.js"></script> 43 <script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script> 44 <script> 45 const socket = io(); 46 $('form').submit(() => { 47 socket.emit('chat message', $('#user_name').val()); 48 return false; 49 }); 50 socket.on('chat message', (msg) => { 51 $('#messages').append($('<li>').text(msg)); 52 }); 53 </script> 54 </body> 55</html> 56
・app.js
js
1var express = require('express'); 2var http = require('http'); 3var path = require('path'); 4var favicon = require('serve-favicon'); 5var logger = require('morgan'); 6var cookieParser = require('cookie-parser'); 7var bodyParser = require('body-parser'); 8 9var index = require('./routes/index'); 10var users = require('./routes/users'); 11 12var app = express(); 13 14var server = http.createServer(app); 15//http.createServer(app).listen(app.get('port'), function(){ // del 16server.listen(app.get('port'), function(){ //add 17 console.log("Express server listening on port " + app.get('port')); 18}); 19 20//socket start 21// add start 22var socketIO = require('socket.io'); 23// クライアントの接続を待つ(IPアドレスとポート番号を結びつけます) 24var io = require('socket.io').listen(server); 25// io.on('connection', function(socket){ 26// console.log('a user connected'); 27// }); 28 29// クライアントが接続してきたときの処理 30io.on('connection', (socket) => { 31 console.log('chat接続'); 32 socket.on('chat message', (msg) => { 33 //繋がった時に行われる動作 34 console.log('message: ' + msg); 35 var query = 'INSERT INTO total_score (score, user_name) VALUES ("150", ' + '"' + msg + '")'; 36 connection.query(query, function(err, rows) { 37 console.log("登録成功！！"); 38 }); 39 io.emit('chat message', msg); 40 }); 41}); 42 43//socket end 44 45// view engine setup 46app.set('views', path.join(__dirname, 'views')); 47app.set('view engine', 'ejs'); 48 49// uncomment after placing your favicon in /public 50//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 51app.use(logger('dev')); 52app.use(bodyParser.json()); 53app.use(bodyParser.urlencoded({ extended: false })); 54app.use(cookieParser()); 55app.use(express.static(path.join(__dirname, 'public'))); 56 57app.use('/', index); 58app.use('/users', users); 59 60// catch 404 and forward to error handler 61app.use(function(req, res, next) { 62 var err = new Error('Not Found'); 63 err.status = 404; 64 next(err); 65}); 66 67// error handler 68app.use(function(err, req, res, next) { 69 // set locals, only providing error in development 70 res.locals.message = err.message; 71 res.locals.error = req.app.get('env') === 'development' ? err : {}; 72 73 // render the error page 74 res.status(err.status || 500); 75 res.render('error'); 76}); 77 78module.exports = app; 79
・読み込み状況
GET /stylesheets/style.css 304 2.851 ms - - GET /socket.io/socket.io.js 404 9.336 ms - 1016 GET /socket.io/socket.io.js 404 4.687 ms - 1016
回答1件
0
ベストアンサー
詳しく内容を確認できてませんがHTML上に
<script src="/socket.io/socket.io.js"></script>
と書いてあるので、ブラウザーからexpressで作成したサーバー側へ上記javascriptのソースファイルをロードする際に
サーバーのURL/socket.io/socket.io.js
に対するGETの要求がきます。しかしながらapp.jsを拝見するとそのURLに対するルーティングが設定されていないのではないでしょうか？そのためブラウザーからsocket.io.jsが要求されたときサーバーがそれを応答できずご質問のような現象になるのだと思います。
それが原因だとすれば対処はこのsocket.io.jsをクライアントへ応答できるようなルーティング設定をすることになりますが・・・
npm installとしてサーバー側へ導入したなら
アプリケーションのディレクトリー/node_modules/socket.io-client/dist/socket.io.js
といった場所にあると思います。そのままの場所からロードさせるならexpress.staticなどを用いてその場所以下のファイルをブラウザーへ応答できるようにstaticルーティングなどを設定しておけばよいと思います。
app.use('/socket.io', express.static('node_modules/socket.io-client/dist'));
しかし大抵の場合あちこちの場所にあるスクリプトのルーティングを一々行うのではなくjsなどの決まったディレクトリーへ置いて
app.use('/js', express.static('client-js'));
のような設定のみしておき、ブラウザーからロードする必要があるjavascriptソースは全てclient-jsのようなディレクトリーへまとめて置くような方法を採っている例をよく見かけると思います。
投稿2018/01/12 01:57
総合スコア18394
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。