JavaScriptでのリアルタイムチャットアプリの構築 – JavaScriptで始めるプログラミング

JavaScriptでのリアルタイムチャットアプリの構築 – JavaScriptで始めるプログラミング

リアルタイムチャットアプリの構築は、JavaScriptの学習者にとって非常に有益なプロジェクトです。この記事では、次のステップに従って進めていきます。

プロジェクトのセットアップ

まず、プロジェクトのセットアップを行います。以下の手順に従ってください。

  1. Node.jsとnpmをインストールします。
  2. 新しいディレクトリを作成し、npm initでプロジェクトを初期化します。
  3. 必要なパッケージをインストールします。例えば、expressとsocket.ioなどです。

サーバーの構築

次に、サーバーを構築します。以下のコードを使用して、基本的なExpressサーバーを設定します。

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

クライアントの構築

次に、クライアント側のコードを作成します。以下のHTMLコードをindex.htmlファイルに追加します。

<!DOCTYPE html>
<html>
<head>
  <title>リアルタイムチャット</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();
    socket.on('message', function(msg){
      var item = document.createElement('li');
      item.textContent = msg;
      document.getElementById('messages').appendChild(item);
    });
  </script>
</head>
<body>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="input" autocomplete="off" /><button>送信</button>
  </form>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(function(){
      $('#form').submit(function(e){
        e.preventDefault();
        socket.emit('message', $('#input').val());
        $('#input').val('');
        return false;
      });
    });
  </script>
</body>
</html>

リアルタイム通信の実装

さらに、リアルタイム通信の機能を追加します。server.jsファイルのio.on('connection')イベント内に次のコードを追加します。

socket.on('message', (msg) => {
  io.emit('message', msg);
});

このようにして、メッセージが送信されるたびに、すべての接続されているユーザーに通知されます。

まとめ

以上で、JavaScriptを使用した基本的なリアルタイムチャットアプリの構築が完了しました。このプロジェクトを通じて、Node.js、Express、Socket.ioの基本的な使い方を学ぶことができます。さらに学ぶためには、Socket.io” aria-label=”Socket.io“>Socket.io(外部リンク)の公式ドキュメントを参照するとよいでしょう。

学ぶことは成長の鍵である。

コメントを残す