1

PCのブラウザとサーバ上とでSocket通信をしようと思っています。環境は以下の通りです。

Ubuntu 14.04
apache2 2.4.7

ブラウザでページを開くとサーバに接続してメッセージ「hello」を送るプログラムです。なぜかNode.jsのログを確認しても、ブラウザのログを確認しても接続したログがありません。

Node.js(サーバ側) msg.js

    var fs = require("fs");
    var http = require("http");
    var server = http.createServer(function(req,res) {
            res.writeHead(200, {"Contents-Type":"text/html"});
            var output = fs.readFileSync("./index.html", "utf-8");
            res.end(output);
});

// socketioの準備
var io = require('socket.io')(server);

// クライアント接続時の処理
io.on('connection', function(socket) {
    var id = socket.id;
    console.log("client connected!!");
    console.log(id)

    // クライアント切断時の処理
    socket.on('disconnect', function() {
        console.log("client disconnected!!")
    });
    // クライアントからの受信を受ける (socket.on)
    socket.on("from_client", function(obj){
        io.emit("from_server", obj);
        console.log(obj)
    });
});

server.listen(3000);

PCブラウザ(クライアント)側のindex.html

<meta charset="UTF-8">
<html>
<head>
</head>
  <body>
<script src="http://www.ubuntu.jp/node/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('ws://www.ubuntu.jp',{path:'/node/'});

socket.on('connect', function() {
        console.log('connected');
        socket.emit('from_client', 'from PC browser');
        socket.on('from_server', function(msg) {
                console.log(msg);
        });
});
</script>
</body>
</html>

apacheでwsプロトコルをReverse Proxyしています。apacheの設定としては以下の通りです。

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    ServerName ubuntu.jp
    ServerAlias www.ubuntu.jp
    DocumentRoot /var/ubuntu
    Options FollowSymLinks MultiViews ExecCGI
    DirectoryIndex index.html index.php

    Alias /node /var/ubuntu/node

      ProxyPass /node/ http://localhost:3000/
      ProxyPass /node/ ws://localhost:3000/
      ProxyPassReverse /node/ http://localhost:3000/
      ProxyPassReverse /node/ ws://localhost:3000/

    ErrorLog ${APACHE_LOG_DIR}/ubuntu_error.log

    # Possible values include: debug, info, notice, warn, error, crit,
    # alert, emerg.
    LogLevel warn

    CustomLog ${APACHE_LOG_DIR}/ubuntu_access.log combined
    ServerSignature Off

    <Directory "/var/ubuntu/">
        Require all granted
    </Directory>
</VirtualHost>

ブラウザで
http://www.ubuntu.jp/node/
にアクセスしました。Firefoxで確認しましたが、consoleログに

SyntaxErr‌​or: expected expression, got '<'( socket.io.js:1:0)

という表示で、socket.io.jsからエラーが出ています。

原因および対処方法をご存知の方はご教授お願いします。

1 件の回答 1

1

現在のコードだと以下のようにres.write("Hello World!!");となっているので、ブラウザでサーバにアクセスすると常に"Hello World!!"というテキストを返す状態になっており、「PCブラウザ(クライアント)側のhtml」の内容がブラウザに表示されません。

var http = require("http");
var server = http.createServer(function(req,res) {
    res.write("Hello World!!");
    res.end();
});

ということで、msg.jsの先頭を以下のように修正して、ブラウザでサーバにアクセスした際に、「PCブラウザ(クライアント)側のhtml」の内容を返すようにする必要があると思います(以下コードは「PCブラウザ(クライアント)側のhtml」がindex.htmlという名称と仮定しています)。

var fs = require("fs");
var http = require("http");
var server = http.createServer(function(req, res) {
    res.writeHead(200, {"Content-Type":"text/html"});
    var output = fs.readFileSync("./index.html", "utf-8");
    res.end(output);
});

参考記事

11
  • 私の勘違いもあり、質問の「PCブラウザ(クライアント)側のhtml」のソースを変更しました。ご回答いただいたindex.htmlのファイル内容を読み取り、応答するように変更してindex.htmlはブラウザ側に送られております。しかし、index.htmlのjavascriptでsocket.ioが繋がらない現象は復旧できておりません。サーバ側のコンソールにもclient connected!!のログは出ておらず、クライアント側のsocket.on('connect'・・・も呼び出されておりません。何か対応が間違っているのでしょうか。
    – Ubunkun
    Commented 2015年8月20日 14:41
  • 「index.htmlはブラウザ側に送られております」となっていますが、ブラウザ上には何が表示されていますか?問題があるとすれば後は「var socket = io.connect('削除'});」の部分ぐらいなので、「削除」の部分を書いて頂け無いでしょうか?IPアドレスは適当に変えてもらって結構ですので。
    – tomute
    Commented 2015年8月20日 15:04
  • おっしゃる通りです。ドメイン名のみ変更して質問のソースを変更しました。こちらapacheの裏側にNode.jsが起動している形となります。apacheの設定にて <Location /node/>  ProxyPass localhost:3000  ProxyPassReverse localhost:3000  Order deny,allow  Deny from all  Allow from all  </Location> を行っております。こちらが原因でしょうか?(改行ができなく見辛くて申し訳ありません)
    – Ubunkun
    Commented 2015年8月20日 15:46
  • あ、Apacheとnode.jsを共存させてるんですね。node.jsのポートを3000にしているのであれば、server.listen(80);の所はserver.listen(3000);じゃ無いですかね?あと参考になりそうな回答がスタックオーバーフローにすでにあったのでそちらも見ていただければと思います。ja.stackoverflow.com/q/7906
    – tomute
    Commented 2015年8月20日 16:11
  • 失礼しました。serv‌​er.listen(3000);です。こちら、質問をしやすくするために80にしていました。質問のソースを変更しました。7906の記事も実はすでに見ていましたが、いまいちよくわからず。proxy_wstunnel_moduleも入れていません。こちら、Ubuntuでapt-get install apache2でapacheをインストールしていますが、proxy_wstunnel_module.soがなく苦慮しています。やはり必要でしょうか?
    – Ubunkun
    Commented 2015年8月20日 16:28

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。