PHPとJavaScriptでチャットみたいなアプリを作ってみる

今回は前回作成したWebSocketサーバーを使用して簡単なチャットアプリを作成したいと思います。

前回の記事をまだ読まれていない方は下記の記事を先に閲覧ください。

1.バックエンドの実装
2.仕様
3.プロジェクトフォルダの作成とHTML、CSSの作成
4.JavaScriptの実装
5.まとめ
1. 関連

1.バックエンドの実装

今回は、上記の前回記事を参照してRatchetのWebSocketサーバーを使用します。

2.仕様

今回の仕様は下記の通りになります。

1.最初に名前を記入する

2.名前を記入した後、「next」ボタンをクリックするとWebSocketへの接続を行う

3.メッセージを入力すると相手と自分双方に自分の名前と送信されたメッセージが表示される

本来であれば、ログイン機能やDBへのチャット内容の保存やDBの参照などをしたいところですが、さっと作りたいので、今回は、入力した名前を使用してチャットを行うような仕様とします。

3.プロジェクトフォルダの作成とHTML、CSSの作成

今回は前回作成したプロジェクトフォルダとは別のフォルダを任意のディレクトリに作成します。

HTMLとCSSは下記の通りです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
    <h1>Easy Chat</h1>
</header>
<main>
    <div class="nameSpace">
        <div id="nameInputSpace">
            <input type="text" id="userNameInput" placeholder="Enter your name">
            <input type="button" id="nextBtn" value="next">
        </div>
        
        <h3 class="hide" id="userName"></h3>
    </div>
    <div id="chatSpace" class="hide">
        <div id="messageDisplaySpace">

        </div>
        <div class="messageInputSpace">
            <input type="text" id="messageInput">
            <input type="button" id="sendBtn" value="send">
        </div>
    </div>
</main>
    <script src="main.js"></script>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
.hide{
    display:none;
}

#messageDisplaySpace div{
    border:1px solid black;
    width: 200px;
    padding: 5px;
    margin: 5px;
}

userNameInputにユーザー名を入力し、nextボタンを押してチャットが開始、messageInputにメッセージを入力して、sendボタンを押すとメッセージの送信、送信されたメッセージはmessageDisplaySpaceに表示される想定の画面となっています。

4.JavaScriptの実装

'use strict';

let userNameInput = document.getElementById('userNameInput');
let nextBtn = document.getElementById('nextBtn');
let userName = document.getElementById('userName');
let nameInputSpace = document.getElementById('nameInputSpace');
let chatSpace = document.getElementById('chatSpace');
let sendBtn = document.getElementById('sendBtn');
let messageInput = document.getElementById('messageInput');
let messageDisplaySpace = document.getElementById('messageDisplaySpace');

let conn;

// ①
nextBtn.addEventListener('click', ()=>{
    if(userNameInput.value != ""){

        nameInputSpace.classList.add("hide");
        userName.classList.remove("hide");
        chatSpace.classList.remove("hide");
        
        userName.appendChild(document.createTextNode(userNameInput.value));

        conn = new WebSocket('ws://localhost:8080');
        conn.onopen = function(e) {
            console.log("Connection established!");
            
        };
        conn.onmessage = function(e) {
            console.log(e.data);
            let displayReceiveUserName = document.createElement('h4');
            displayReceiveUserName.textContent = JSON.parse(e.data).name;
            let displayReceiveMessage = document.createElement('p');
            displayReceiveMessage.textContent = JSON.parse(e.data).message;
            
            let displayReceivePart = document.createElement('div');
            displayReceivePart.appendChild(displayReceiveUserName);
            displayReceivePart.appendChild(displayReceiveMessage);

            console.log(JSON.parse(e.data).name);
            console.log(displayReceivePart);

            messageDisplaySpace.appendChild(displayReceivePart);
        };
    }
})


// ②
sendBtn.addEventListener('click', ()=>{
    if(messageInput.value != "" && conn){
        let sendContent = {name:userName.textContent, message:messageInput.value}
        let jsonSendContent = JSON.stringify(sendContent);
        
        conn.send(jsonSendContent);


        let displayUserName = document.createElement('h4');
        displayUserName.textContent = userName.textContent;
        let displayMessage = document.createElement('p');
        displayMessage.textContent = messageInput.value;
        
        let displayPart = document.createElement('div');
        displayPart.appendChild(displayUserName);
        displayPart.appendChild(displayMessage);

        messageDisplaySpace.appendChild(displayPart);
        messageInput.value = "";
    }
})

まずはユーザー名入力後のnextボタンをクリックした際の処理(①)です。

localhost:8080にWebsocketサーバーが構築されていますので、そのWebSocketサーバーに接続します。

その後は受け取ったメッセージに対して、HTMLを構築します。

次に自分がメッセージを送った際の処理(②)になります。

WebSocketサーバーではメッセージを送った人に通知しないロジックにしているため、こちらは送信した文言をそのまま。

これで実装は完了になります。