100 lines
3.7 KiB
Plaintext
100 lines
3.7 KiB
Plaintext
|
<head>
|
||
|
|
<link rel="stylesheet" href="/styles/chat.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<div class="chat-container">
|
||
|
|
<div id="chat-window" class="chat-window">
|
||
|
|
<% messages.forEach(function(message) { %>
|
||
|
|
<div class="message <%= message.role === 'user' ? 'user-message' : 'isotope-message' %>">
|
||
|
|
<div class="message-author">
|
||
|
|
<% if (message.role === 'user') { %>
|
||
|
|
<span class="message-timestamp"><%= formatTimestamp(message.createdAt) %></span>
|
||
|
|
<strong>あなた</strong>
|
||
|
|
<% } else { %>
|
||
|
|
<strong><%= isotope.name %></strong>
|
||
|
|
<span class="message-timestamp"><%= formatTimestamp(message.createdAt) %></span>
|
||
|
|
<% } %>
|
||
|
|
</div>
|
||
|
|
<div class="message-content">
|
||
|
|
<p><%= message.message %></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<% }); %>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chat-input-container">
|
||
|
|
<form id="chat-form" class="chat-form">
|
||
|
|
<input type="text" id="message-input" class="chat-input" placeholder="メッセージを入力" required>
|
||
|
|
<button type="submit" class="chat-submit-btn">送信</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const chatWindow = document.getElementById('chat-window');
|
||
|
|
const chatForm = document.getElementById('chat-form');
|
||
|
|
const messageInput = document.getElementById('message-input');
|
||
|
|
|
||
|
|
// ページ初期化完了時にチャットウィンドウを最下部にスクロール
|
||
|
|
window.onload = function() {
|
||
|
|
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||
|
|
};
|
||
|
|
|
||
|
|
// サーバーから渡されたJWTトークン
|
||
|
|
const token = '<%= token %>';
|
||
|
|
// WebSocketサーバーのURL
|
||
|
|
const wsServerUrl = '<%= process.env.WS_SERVER_URL %>';
|
||
|
|
|
||
|
|
// WebSocket接続時にトークンをクエリパラメータに含める
|
||
|
|
const ws = new WebSocket(`${wsServerUrl}?token=${token}`);
|
||
|
|
|
||
|
|
ws.onopen = function() {
|
||
|
|
console.log('WebSocket connection established');
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
ws.onmessage = function(event) {
|
||
|
|
const data = JSON.parse(event.data);
|
||
|
|
|
||
|
|
// BOTのメッセージを表示
|
||
|
|
if (data.isotopeReply) {
|
||
|
|
const isotopeMessage = document.createElement('div');
|
||
|
|
const isotopeName = '<%= isotope.name %>';
|
||
|
|
isotopeMessage.classList.add('message', 'isotope-message');
|
||
|
|
isotopeMessage.innerHTML = `
|
||
|
|
<div class="message-author">
|
||
|
|
<strong>${isotopeName}</strong>
|
||
|
|
<span class="message-timestamp">${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
|
||
|
|
</div>
|
||
|
|
<div class="message-content"><p>${data.isotopeReply}</p></div>`;
|
||
|
|
chatWindow.appendChild(isotopeMessage);
|
||
|
|
chatWindow.scrollTop = chatWindow.scrollHeight; // スクロールを最下部に
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// フォーム送信イベントのリスナーを追加
|
||
|
|
chatForm.addEventListener('submit', function(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
const message = messageInput.value;
|
||
|
|
|
||
|
|
// メッセージを即時にチャットウィンドウに追加
|
||
|
|
const userMessage = document.createElement('div');
|
||
|
|
userMessage.classList.add('message', 'user-message');
|
||
|
|
userMessage.innerHTML = `
|
||
|
|
<div class="message-author">
|
||
|
|
<span class="message-timestamp">${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
|
||
|
|
<strong>あなた</strong>
|
||
|
|
</div>
|
||
|
|
<div class="message-content"><p>${message}</p></div>`;
|
||
|
|
chatWindow.appendChild(userMessage);
|
||
|
|
chatWindow.scrollTop = chatWindow.scrollHeight; // スクロールを最下部に
|
||
|
|
|
||
|
|
// WebSocketを通じてメッセージを送信
|
||
|
|
const isotopeId = '<%= isotope.id %>';
|
||
|
|
ws.send(JSON.stringify({ userMessage: message, isotopeId: isotopeId }));
|
||
|
|
|
||
|
|
// 入力フィールドをクリア
|
||
|
|
messageInput.value = '';
|
||
|
|
});
|
||
|
|
</script>
|