API Gatewayのウェブソケットの制約事項まとめ＆Javascriptによる接続実装を解説😎

// Connect to the WebSocket endpoint
const socket = new WebSocket('wss://{API_ID}.execute-api.{REGION}.amazonaws.com/{STAGE_NAME}');

// Listen for messages from the server
socket.addEventListener('message', (event) => {
  // Parse the message
  const message = JSON.parse(event.data);
  
  // Display the message in the chat window
  const chatWindow = document.getElementById('chat-window');
  const newMessage = document.createElement('p');
  newMessage.textContent = `${message.username}: ${message.text}`;
  chatWindow.appendChild(newMessage);
});

// Send a message to the server
const sendMessage = (username, text) => {
  // Create the message object
  const message = {
    username,
    text
  };

  // Send the message to the server
  socket.send(JSON.stringify(message));
};

// Listen for the 'send' button to be clicked
const sendButton = document.getElementById('send-button');
sendButton.addEventListener('click', () => {
  // Get the username and message text from the form
  const username = document.getElementById('username').value;
  const text = document.getElementById('message-text').value;
  
  // Send the message to the server
  sendMessage(username, text);
});