質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.24%

  • Socket.IO

    156questions

    Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

  • Express

    149questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

ejsとexpressのプロジェクトで/socket.io/socket.io.jsの読み込みが読み込まれない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 31

jaaaaack

score 12

expressとejsを使ったプロジェクトにsocket.ioを使おうと思い、
npm install socket.ioなどを使って導入してみましたが、
GET /socket.io/socket.io.js 404 9.336 ms - 1016と出て、socketが反応しません。
どのようにしたらsocket通信を行うことができるのか教えてください。

・index.ejs

<!DOCTYPE html>
<html>
  <head>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <div class="wrapper">
      <form action="" method="post" class="board-form">
        スコア: <input type="text" name="score" id="score" class="input" required><br>
        名前: <input type="text" name="user_name" id="user_name" class="input" required><br>
        <br>
        <button type="submit" id="score_post" class="submit">ボード作成</button>
      </form>
      <h1>TOP RANKING</h1>
      <ul class="rank-list">
        <% Rank.forEach(function(scoreRank) { %>
          <li class="main-list__item">
            <p class="board__title"><%= scoreRank.user_name %></p>
            <p class="board__date"><%= scoreRank.score %></p>
            </a>
          </li>
        <% }); %>
      </ul>
      <h1>NEW SCORE</h1>
      <ul class="new-list">
        <% List.forEach(function(scoreList) { %>
          <li class="main-list__item">
            <p class="board__title"><%= scoreList.user_name %></p>
            <p class="board__date"><%= scoreList.score %></p>
          </li>
        <% }); %>
      </ul>
      <ul id="messages">socket.io

      </ul>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script>
    <script>
        const socket = io();
        $('form').submit(() => {
            socket.emit('chat message', $('#user_name').val());
            return false;
        });
        socket.on('chat message', (msg) => {
            $('#messages').append($('<li>').text(msg));
        });
    </script>
  </body>
</html>

・app.js

var express = require('express');
var http = require('http');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

var server = http.createServer(app);
//http.createServer(app).listen(app.get('port'), function(){ // del
server.listen(app.get('port'), function(){ //add
  console.log("Express server listening on port " + app.get('port'));
});

//socket start
// add start
var socketIO = require('socket.io');
// クライアントの接続を待つ(IPアドレスとポート番号を結びつけます)
var io = require('socket.io').listen(server);
// io.on('connection', function(socket){
//   console.log('a user connected');
// });

// クライアントが接続してきたときの処理
io.on('connection', (socket) => {
  console.log('chat接続');
  socket.on('chat message', (msg) => {
    //繋がった時に行われる動作
    console.log('message: ' + msg);
    var query = 'INSERT INTO total_score (score, user_name) VALUES ("150", ' + '"' + msg + '")';
    connection.query(query, function(err, rows) {
      console.log("登録成功!!");
    });
    io.emit('chat message', msg);
  });
});

//socket end

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;


・読み込み状況

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
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

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のようなディレクトリーへまとめて置くような方法を採っている例をよく見かけると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.24%

関連した質問

同じタグがついた質問を見る

  • Socket.IO

    156questions

    Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

  • Express

    149questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。