Help us understand the problem. What is going on with this article?

node.jsでlocalhostに簡単なチャットシステムを作成する

More than 3 years have passed since last update.

Macでnode.jsの勉強のためにチャットシステムを立ち上げて見ました。

node.jsのダウンロードとインストール

まず、node.jsをダウンロードし、インストールします。
こちらのサイトからダウンロードしてください。
そのまま、インストールします。
ターミナルを起動して、node.jsのバーキョンを確認します。

$ node -v

※この表記で使用している「$」はターミナルを開くとすぐに表示される「$」になります。なので、「$」自体は記述しないで大丈夫です。

「v0.11.11」というようなバージョンが表示されればOKです。

npm で簡単インストール

node.jsをインストールすると、npmというコマンドが手に入ります。
これがめちゃめちゃ使えます。というか使っていきます。
node.jsはよくわからないのですが、簡単にいうとサーバーサイドがJSのスクリプトで動かせるということらしいです。

チャットシステムを構築するために、このnpmを使ってガンガンインストールしていきましょう。

socket.ioのインストール

socket.ioはサーバーサイドとクライアントを繋げるものらしいです。もちろんjsです。
再度ターミナルで次のコマンドを叩きます。

 $ npm install socket.io

たったこれだけで「socket.io」がインストールされます。
enterを押すと緑文字で「http」と文頭にある行がいくつも出てきます。
エラーの場合は「ERRE」と赤文字で表示されます。
2017年1月の段階では、socket.ioは問題なくインストールできました。

expressのインストール

expressはWebアプリを作成するためのフレームワークだそうです。
こちら、検索すると色々なインストール方法があるようですが、一般的にある「-g」を使用したものだと、うまくインストールできませんでした。
参考のサイトなどもリンクが切れているようなので、発行元が変わってしまったようです。
ただ、socketの時と同じように、単純にインストールしたらうまくできたような気がします。

 $ npm install express

チャットシステムの構築

ここまでできたら、実際にjsとHTMLを記述していきます。
こちらのページを参考にさせてもらいました。
node.jsとsocket.ioで簡易チャットを作成する

app.jsの実装

ファイル名は適当で大丈夫です。

app.js
var path = require('path');
var express = require('express');
var app = express();

var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use(express.static(path.join(__dirname, 'htdocs')));

io.on('connection', function(socket){
  socket.on('send_message', function(text){
    io.sockets.emit('receive_message',text);
  });
});

http.listen(3000);
console.log('Server started: http://localhost:3000/');

このスクリプトのポイントは6行目に記述した「htdocs」の部分です。
こちらがディレクトリをしてしています。この場合は、「htdocs」というフォルダ内のindex.htmlを読みにいきます。このファイル「app.js」と同じ階層のファイルを読みにいきたい場合は「./」を設定します。
さらに、最後から2行目のもの「http.listen(3000);」がポートを設定しています。

こちらで、ターミナルに「Server started: http://localhost:3000/」が表示されたら成功です。
ブラウザで「http://localhost:3000/」にアクセスするとindex.htmlが表示されます。

index.htmlの設定

indexの設定は先ほどご紹介したサイトのHTMLをそのまま使用できます。
node.jsとsocket.ioで簡易チャットを作成する

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away