Tech Tips

  1. プログラミング
  2. 200 view

[express][socket.io]チャットデモのコードを見てみる

参考記事


※この記事は、ただの上記のリンク先の記事を読んだメモです。

1.レシーバーの記述

サーバに対してlistenするから、app.jsの末尾のあたりに以下のように記述すれば良いみたい。
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
"use strict";
var express = require('express')
  , routes = require('./routes')
  , http = require('http')
  , path = require('path');
 
var app = express();
 
app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});
 
app.configure('development', function(){
  app.use(express.errorHandler());
});
 
app.get('/', routes.index);
 
var server = http.createServer(app);
server.listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});
 
//=================================================================
//socket.ioのインスタンス作成
var io = require('socket.io').listen(server);
 
//クライアントから接続があった時
io.sockets.on('connection',function(socket){
   //クライアントからmessageイベントが受信した時
   socket.on('message',function(data){
      //念のためdataの値が正しいかチェック
      if(data && typeof data.text === 'string'){
         //メッセージを投げたクライアント以外全てのクライアントにメッセージを送信する。
         socket.broadcast.json.emit('message',{text:data.text});
      }
   });
});
ちゃんと書くなら処理内容はモデル化してuseした方が良さそう。

2.ビュー

サーバ部分は実装出来たから後はクライアント部分。
参考記事のサンプルでは以下のようにビュー(routes/index.jsのビュー)でjavascriptを読み込んで、そこで処理してる。
index.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <title>チャットサンプル</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
<script src="/socket.io/socket.io.js"></script>
<script src="/javascripts/jquery-1.8.0.js"></script>
<script src="/javascripts/client.js"></script>
  </head>
  <body>
    <h1>チャットサンプル</h1>
    <div><input type="text" id="input" /><button id="send">send</button></div>
<div id="list"></div>
  </body>
</html>
client.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
jQuery(function($) {
   "use strict";
   //socket.ioのサーバにに接続
   var socket = io.connect('http://'+location.host+'/');
 
   //サーバからmessageイベントが送信された時
   socket.on('message',function(data){
      $('#list').prepend($('<div/>').text(data.text));
   });
   //sendボタンがクリックされた時
   $('#send').click(function(){
      var text = $('#input').val();
      if(text !== ''){
         //サーバにテキストを送信
         socket.emit('message',{text:text});
         $('#list').prepend($('<div/>').text(text));
         $('#input').val('');
      }
   });
});

3.実行結果

result

プログラミングの最近記事

  1. C# でオブジェクトの概要を Console.WriteLine で出力する方法

  2. コマンドで C# コンソールアプリケーションを作成する方法

  3. PubSubClient の便利さと注意点

  4. Java の環境構築方法メモ

  5. PlatformIO IDE for VSCode を使用して VSCode で Ardu…

関連記事

PAGE TOP