Express、Node.jsフレームワークをインストールし、VPSにSocket.ioをセットアップする方法

投稿日: 2022-04-20 2022-10-20
タグ: Development, Node.js

この記事で学ぶこと

Node Version Manager（NVM）を使用してNodeJS0.10.16をインストールする方法
NodeJS用のExpressWebアプリケーションフレームワークをインストールする方法
簡単なExpressプロジェクトを設定する方法
Expressでsocket.ioを設定する方法
簡単なメッセージをリアルタイムでクライアントに送信する
クライアント側のJavaScriptを使用してメッセージをリッスンする方法

ステップ1：NodeJSを設定する

注：NodeJSがv0.10.16をインストールしていることがすでにわかっている場合は、この手順をスキップできます。

Node Version Manager（NVM）は、LinuxマシンにさまざまなバージョンのNodeJSをインストールするのに役立つツールです。 NVMを使用するには、次のことを確認してください。 git と curl インストールされています。

SSHを使用してVPS（ドロップレット）に接続します。

これらがインストールされていない場合は、システムのパッケージマネージャーを使用してインストールしてください。たとえば、UbuntuまたはDebianのインストールでは、次のように実行します。

```
sudo apt-get install curl git
```

次に、NVMインストールスクリプトを実行する必要があります。

curl https://raw.github.com/creationix/nvm/master/install.sh | sh

重要：ボックスからログアウトし、SSHを使用して再接続する必要があります。

テストして、 nvm コマンドは次のように入力すると機能します nvm ターミナルで。取得しない場合 command not found エラーが発生した場合は、NVMが正しく設定されています。

Nodeの最新バージョン（この記事の時点では0.10.16）をインストールするには、次のように入力します。

nvm install 0.10.16

次に、インストールが完了するのを待ちます。インストールが成功した場合は、次の出力が表示されます。 Now using node v0.10.16.

タイプ node -v 指定されたバージョンを使用していることを確認するためにターミナルで。次の出力が得られるはずです。 v0.10.16

ステップ2：Expressを設定する

Expressは、Node用のWebアプリケーションフレームワークです。最小限で柔軟性があります。 Expressの使用を開始するには、NPMを使用してモジュールをインストールする必要があります。シンプルタイプ：

npm install -g express

これにより、基本的なWebアプリケーションの作成に役立つExpressコマンドラインツールがインストールされます。 Expressをインストールしたら、次の手順に従って空のExpressプロジェクトを作成します。

mkdir socketio-test

cd socketio-test

express

npm install

これらのコマンドは、作成したディレクトリに空のExpressプロジェクトを作成します socketio-test. 次に実行します npm install アプリの実行に必要なすべての依存関係を取得します。空のアプリケーションをテストするには、 node app 次に、ブラウザを http：// yourDropletIp-or-domainName：3000に移動します。「WelcometoExpress」という簡単なウェルカムメッセージが表示されます。

ウェルカムメッセージが表示されたら、基本的なExpressアプリケーションの準備ができて実行されています。

続行する前に、Ctrl+Cキーボードコマンドを使用してVPSを強制終了してください。

手順3：ExpressアプリケーションにSocket.ioをインストールする

まず、Socket.ioとは何かについて簡単に説明します。 Socket.ioはリアルタイムのJavaScriptライブラリです。要するに、これはWebSocket APIであり、AJAX Long Polling、Flash、または単なるWebSocketであるかどうかにかかわらず、ブラウザーの機能に応じて確立する接続の正しいタイプを決定します。

では、どのようにしてこれを始めますか？まず、Socket.ioサーバーが必要です。 Expressサーバーの準備ができて待機しています。必要なのは、ソケットライブラリを追加することだけです。これを行うには、それをに追加する必要があります package.json ファイル。

最初のファイルは次のようになります。

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.3.5",
    "jade": "*"
  }
}

次に、「依存関係」領域に新しいフィールドを追加します。

"socket.io": "latest",

結果のファイルは次のようになります。

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "socket.io": "latest",
    "express": "3.3.5",
    "jade": "*"
  }
}

今すぐ実行 npm install もう一度ソケットライブラリをインストールします。

パート4：サーバーコード

すべての依存関係が設定されたので、コードを開始できます。行って、開いてください app.js Expressアプリケーションフォルダ内のファイル。内部には、自動生成されたコードがたくさんあり、すべてを削除して、代わりに次の例を使用します。

/**
 * Module dependencies.
 */
 
var express = require('express')
  , routes = require('./routes')
  , http = require('http');
 
var app = express();
var server = app.listen(3000);
var io = require('socket.io').listen(server); // this tells socket.io to use our express server
 
app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.static(__dirname + '/public'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
});
 
app.configure('development', function(){
  app.use(express.errorHandler());
});
 
app.get('/', routes.index);
 
 
console.log("Express server listening on port 3000");

このサンプルファイルはすべて、自動生成されたコードを再編成し、 var io = require('socket.io').listen(server); socket.ioにExpressサーバーをリッスンして使用するように指示する行。ノードアプリを実行すると、次の出力が表示されます。 info - socket.io started.

では、どのようにしてメッセージをユーザーに転送するのでしょうか。

次の行をに追加します app.js 最後の行のすぐ下。

io.sockets.on('connection', function (socket) {
    console.log('A new user connected!');
    socket.emit('info', { msg: 'The world is round, there is no up or down.' });
});

これにより、新しいユーザーがサーバーに接続するたびに、新しいソケットメッセージが送信されます。ここで、クライアント側でVPSと対話する方法が必要です。

パート5：クライアントサイドコード

にナビゲート public/javascripts Expressアプリケーション内のフォルダを作成し、という新しいファイルを追加します client.js そして、このコードをそれに入れます：

// connect to the socket server
var socket = io.connect(); 

// if we get an "info" emit from the socket server then console.log the data we recive
socket.on('info', function (data) {
    console.log(data);
});

コードは単純ですが、Socket.ioで何ができるかを示しています。ここで、メインページにスクリプトを含める必要があります。

に移動します views Expressアプリでフォルダを開き、 layout.jade. Expressは、ページのレンダリングにプレーンHTMLを使用しません。 Jadeと呼ばれるテンプレートエンジンを使用しています。（Jadeの詳細については、ここを参照してください）Jadeは、プレーンHTMLと比較してシンプルでクリーンです。クライアントスクリプトを追加し、 Socket.io クライアントライブラリを追加するには、これらをすぐ下の行に追加する必要があります。 link(rel='stylesheet', href='/stylesheets/style.css'):

script(type='text/javascript', src="/socket.io/socket.io.js")
script(type='text/javascript', src='javascripts/client.js')

それらが同じインデントレベルに並んでいることを確認し、タブとスペースを混在させないでください。これにより、ジェイドはエラーをスローします。

socketio-testディレクトリに戻ります。

cd socketio-test

レイアウトファイルを保存し、次を使用してExpressアプリをもう一度起動します。 node app.

パート6：それをテストする

次に、ブラウザをもう一度 http：// yourDropletIp-or-domainName：3000 に移動し、開発者ツールコンソールを開きます。ログに次のようなものが表示されるはずです。

Object {msg: "The world is round, there is no up or down."}

これは、VPSからクライアントにリアルタイムで直接送信されるメッセージです。

投稿者： https ：//twitter.com/aaron524web ”>アーロン・シェイ

getdocs

13036