WebSocket Client. How to send messages using function prompt()?

[suchislife801]

I have found Deno's websocket chat example and I would like to know if it's possible to create a client that works in the command line.

In the following example, Deno websocket client connects, sends a message, receives data and closes connection to the server.

// Start the connection to the WebSocket server at 127.0.0.1:81
const ws = await new WebSocket("ws://127.0.0.1:81/ws");

// Register event listeners for the open, close, and message events
ws.onopen = async () => {
  console.log("WebSocket ready!");

  // Send a message over the WebSocket to the server
  ws.send("Hello World!");

};
ws.onmessage = async (message) => {
  // Log the message we recieve:
  console.log("Received data:", message.data);

  // Close the websocket after receiving the message
  // ws.close();
};
ws.onclose = async () => console.log("WebSocket closed!");
// ws.onerror = (err) => console.log("WebSocket error:", err.error);

In the following example, I attempt to create an interactive mode that connects and sends messages through the command prompt but for some reason, the while loop keeps messages from being sent. Can anyone help me figure out what I'm missing?

// Start the connection to the WebSocket server at echo.websocket.org
const ws = await new WebSocket("ws://127.0.0.1:81/ws");

// Register event listeners for the open, close, and message events
ws.onopen = async () => {
  console.log("WebSocket ready!");

  // Send a message over the WebSocket to the server
  ws.send("Hello World!");

};
ws.onmessage = async (message) => {
  // Log the message we recieve:
  console.log("Received data:", message.data);

  // Close the websocket after receiving the message
  // ws.close();
};
ws.onclose = async () => console.log("WebSocket closed!");
// ws.onerror = (err) => console.log("WebSocket error:", err.error);

// When running this the following is logged to the console:
//
// WebSocket ready!
// Received data: Hello World!
// WebSocket closed!

while(true) {

  // The command prompt is always awaiting commands...
  const command = await prompt('>');

  // each command calls a different function.
  if (typeof command === 'string') {

    // Send the message!
    ws.send(command);

  }

}

The original websocket server:

// Copyright 2018-2021 the Deno authors. All rights reserved. MIT license.
import { listenAndServe } from 'https://deno.land/std@0.85.0/http/server.ts';
import {
  acceptable,
  acceptWebSocket,
  isWebSocketCloseEvent,
  WebSocket,
} from 'https://deno.land/std@0.85.0/ws/mod.ts';
import { fromFileUrl } from 'https://deno.land/std@0.85.0/path/mod.ts';

// Create a Map to keep track of clients and their connections.
const connectedClients = new Map<number, WebSocket>();

let clientIdSeed = 1000;

listenAndServe({ hostname: '127.0.0.1', port: 81 }, async (req) => {

  // If a GET request is being made to http://127.0.0.1:81/ws
  if (req.method === 'GET' && req.url === '/ws') {

    // If this is an acceptable websocket request...
    if (acceptable(req)) {

      // Accept and...
      acceptWebSocket({
                        conn: req.conn,
                        bufReader: req.r,
                        bufWriter: req.w,
                        headers: req.headers,
                      }).then(webSocketConnectionHandler); //  ..handle the websocket connection.
    }

  }

});

// Connection handler
async function webSocketConnectionHandler(clientWebSocket: WebSocket): Promise<void> {

  // Increment clientId by 1 for every user that connects.
  const clientId = ++clientIdSeed;

  // Keep track of each user & instance of websocket that connects.
  connectedClients.set(clientId, clientWebSocket);

  // broadcast client Connected event message to all.
  broadcast(`@${clientId} connected.`);

  // Log the message to server console.
  console.log(`@${clientId}: connected.`);

  // For each message sent through this specific web socket...
  for await (const clientMessage of clientWebSocket) {

    // Log the message to server console.
    console.log(`@${clientId}:`, clientMessage);

    // If the message is of type string...
    if (typeof clientMessage === 'string') {

      // Broadcast the client message to all.
      broadcast(`@${clientId}: ${clientMessage}`);

    } else if (isWebSocketCloseEvent(clientMessage)) {
      // If client closed connection...
      // Delete client from connectedClients store.
      connectedClients.delete(clientId);

     // Broadcast the Closed message to all.
      broadcast(`@${clientId} disconnected.`);

      // Log the message to server console.
      console.log(`@${clientId}: disconnected.`);

      break;

    }
  }
}

// Message broadcaster
function broadcast(clientMessage: string): void {

  // For each client connected...
  for (const client of connectedClients.values()) {
    // Send message to client.
    client.send(clientMessage);
  }

}

console.log('Chat server starting on 127.0.0.1:81....');

The original html/javascript websocket client code:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>webSocketConnection chat example</title>
  </head>
  <body>
    <div>
      <input type="text" id="inputData" />
      <button id="btnSend" disabled>send</button>
      <button id="btnConnect">connect</button>
      <button id="btnClose" disabled>close</button>
    </div>
    <div id="divStatus"></div>
    <ul id="ulTimeline"></ul>
    <script>

    	// Global websocket
      let webSocketConnection;
      
      // Div divStatus
      const divStatus = document.getElementById('divStatus');

      // List ulTimeline
      const ulTimeline = document.getElementById('ulTimeline');

      // Text input data
      const inputData = document.getElementById('inputData');
      inputData.addEventListener('keydown', keyDownEvent);

      // Button send
      const btnSend = document.getElementById('btnSend');
      btnSend.onclick = send;

      // Button connect
      const btnConnect = document.getElementById('btnConnect');
      btnConnect.onclick = connect;

      // Button close
      const btnClose = document.getElementById('btnClose');
      btnClose.onclick = close;

      function send() {
      	// Send input data as message through Websocket via button Click.
        webSocketConnection.send(inputData.value);
        applyState({inputValue: ''});
      }
      
      function keyDownEvent(e) {
      	// Send input data as message through Websocket via Enter key.
        if (e.keyCode === 13) return send();
      }
      
      function connect() {

      	// If this client is already connected, first close existing connection.
        if (webSocketConnection) webSocketConnection.close();
      
      	// Create a new Websocket client connection.
        webSocketConnection = new WebSocket(`ws://${location.host}:81/ws`);

        // Capture Websocket Events open, message & close!

        // Add open Event Listener
        webSocketConnection.addEventListener('open', () => {
          console.log('open', webSocketConnection);
          applyState({connected: true});
        });
      
      	// Add message Event Listener
        webSocketConnection.addEventListener('message', ({data}) => {
      		// Create a new List item.
	        const li = document.createElement('li');
	        li.className = 'message';
	        li.innerText = data;
	        // Append List Item to List.
	        ulTimeline.appendChild(li);
        });
      
      	// Add close Event Listener
        webSocketConnection.addEventListener('close', () => {
          applyState({connected: false});
        });
      
      }

      function close() {

      	// Close the websocket.
        webSocketConnection.close();
        // Render status.
        applyState({connected: false});

        // Enable connect button.
        btnConnect.enabled = true;
      }
      
      function applyState({connected, divStatus, inputValue}) {
      
        if (inputValue != null) {
          inputData.value = inputValue;
        }
      
        if(divStatus != null) {
          divStatus.innerText = divStatus;
        }
      
        if (connected != null) {
      
          if (connected) {
      
            btnSend.disabled = false;
            btnConnect.disabled = true;
            btnClose.disabled = false;
      
          } else {
          	
            btnSend.disabled = true;
            btnConnect.disabled = false;
            btnClose.disabled = true;
          }
      
        }

      }

    </script>
  </body>
</html>

[lucacasonato]

You're call to prompt blocks the event loop from running. If you want a non blocking prompt, use readLines from std/io.