More than 3 years have passed since last update.

Node.jsとSocket.ioで簡易的なチャットを実現させる

Last updated at 2019-12-15Posted at 2019-12-15

簡易的なWebチャットを実装する

はじめに

この記事はSLP KBIT Advent Calender 2019の16日目の記事である。
Socket.ioを用いた開発をまだやったことがなかったので今回はそういった開発を行っていきたいと思います。
かなり前に作ったので実装過程をちょっと忘れてしまいました…。

環境

・Windows 10(64bit)
・Node.js : v10.15.3

準備

この開発ではNode.js、Socket.ioの他に、ローカルサーバーを簡単に立ち上げれるExpressを使うのでもしインストールしていない人は以下のコマンドでインストールしてみましょう。

$ npm install express

実装

サーバをたてる準備

create.js

var express = require('express');//expressを使用
var app = express();
var http = require('http').Server(app);

const path = require('path');
const io = require('socket.io')(http);
const PORT = process.env.PORT || 4649;

app.get('/' , function(req, res){
    res.sendFile(__dirname+'/chat_room/chat.html');//chat.htmlへ移動
});



io.on('connection',function(socket){
     // メッセージ送信処理
    socket.on('chat message', function(msg, user){
    //io.emit('chat message', msg);
    io.emit('chat message', {
        userName: user,
        message: msg
    });

  });
});

http.listen(PORT, function(){
    console.log('server listening. Port(・v・)/:' + PORT);//PORT番ポートに接続
});

app.use(express.static(path.join(__dirname, 'chat_room')));//chat_roomディレクトリを公開

ちなみにchat_roomディレクトリにチャットを表示するhtmlとcssファイルを用意しているので最後の行で

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

と記述しています。(これがないとchat_roomの中にあるcssを読み込んでくれなかった)

HTMLとCSS

チャットを表示するためのHTMLとCSSを作ります

chat.html

<!DOCTYPE html>
<html>
    <head> 
      <meta http-equiv="content-type" content="text/html charset=UTF-8">
        <title>Socketテスト</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />

  </head>
  <body>
<h1>チャットテスト(・v・)/</h1>

<!-- メッセージ入力欄 -->
<form action="#" id="chatForm">
    <input id="u" autocomplete="off" placeholder="ユーザ名"/>
    <input id="m" autocomplete="off" placeholder="テキスト"/>
    <button>Send</button>
</form>
<hr>

<!-- メッセージの表示 -->
<ul id="messages"></ul>

<!--必須モジュール２つ-->
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  var socket = io();
  //var userName = 'test';
  $(function () {
var userName = '';
    // メッセージを送信する
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val(), $('#u').val());
      $('#m').val('');
      return false;
    });

    // 受信したメッセージを表示
    // ul id ="messages"の部分
    socket.on('chat message', function(data){
      var chat = data.userName + " 『 " + data.message + " 』";
      if ((data.message != '') && (data.userName != '') ) {//空じゃない場合
      $('#messages').append($('<p id="chat">').text(chat));//ユーザとテキストは前提条件
      }
    });
  });
</script>

</body>
</html>

style.css

#messages {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: solid 3px #9facd4;

}

#chat {
    margin-top: 1px;
    padding: 2px;
    background-color: rgb(218, 246, 255);
    color: #292929;
}