### Initializing WebSocket Connection in JavaScript

Source: https://github.com/winddriver/delphi-cross-socket/blob/master/Net/Demos/Old/CrossWebSocket/web/index.html

This snippet initializes and manages the WebSocket connection for the chat application. It dynamically sets the WebSocket URL, establishes event listeners for connection status, incoming messages, and disconnections, and includes a reconnection mechanism.

```JavaScript
var WS = document.location.protocol == "http:" ? "ws://" : "wss://";
var URL = WS + document.location.host + "/chat";
var ws;
function openWs() {
  console.log('Connect %s', URL);
  ws = new WebSocket(URL);
  ws.onopen = function(evt) {
    console.log("Connection open ...");
    connected = true;
  };
  ws.onmessage = function(evt) {
    console.log( "Received Message: " + evt.data);
    addChatMessage(evt.data);
  };
  ws.onclose = function(evt) {
    console.log("Connection closed.");
    connected = false;
    setTimeout(openWs, 1000);
  };
}
openWs();
```

--------------------------------

### Handling Keyboard Events for Chat Input in JavaScript

Source: https://github.com/winddriver/delphi-cross-socket/blob/master/Net/Demos/Old/CrossWebSocket/web/index.html

This snippet sets up a global keyboard event listener to enhance user interaction. It automatically focuses the chat input field on most key presses and triggers the `sendMessage` function when the Enter key is pressed, facilitating quick message submission.

```JavaScript
$window.keydown(function (event) {
  if (!(event.ctrlKey || event.metaKey || event.altKey)) {
    $inputMessage.focus();
  }
  if (event.which === 13) {
    sendMessage();
  }
});
```

--------------------------------

### Displaying Chat Messages in JavaScript

Source: https://github.com/winddriver/delphi-cross-socket/blob/master/Net/Demos/Old/CrossWebSocket/web/index.html

These functions handle the rendering of chat messages in the user interface. `addChatMessage` constructs the HTML for a new message, while `addMessageElement` appends it to the message list, applying optional fade effects and ensuring the scrollbar is at the bottom.

```JavaScript
function addChatMessage (data, options) {
  var $messageBodyDiv = $('<span class="messageBody">')
  .text(data);
  var $messageDiv = $('<li class="message"/>')
  .append($messageBodyDiv);
  addMessageElement($messageDiv, options);
}
function addMessageElement (el, options) {
  var $el = $(el);
  if (!options) {
    options = {};
  }
  if (typeof options.fade === 'undefined') {
    options.fade = true;
  }
  if (typeof options.prepend === 'undefined') {
    options.prepend = false;
  }
  if (options.fade) {
    $el.hide().fadeIn(FADE_TIME);
  }
  if (options.prepend) {
    $messages.prepend($el);
  } else {
    $messages.append($el);
  }
  $messages[0].scrollTop = $messages[0].scrollHeight;
}
```

--------------------------------

### Managing UI Elements and Sending Messages in JavaScript

Source: https://github.com/winddriver/delphi-cross-socket/blob/master/Net/Demos/Old/CrossWebSocket/web/index.html

This section defines global variables for UI elements and connection state, along with the `sendMessage` function. The function retrieves text from the input field, clears it, and sends the message via the established WebSocket connection if the client is connected.

```JavaScript
var FADE_TIME = 150; // ms
var $window = $(window);
var $messages = $('.messages');
var $inputMessage = $('.inputMessage');
var connected = false;
function sendMessage () {
  var message = $inputMessage.val();
  if (message && connected) {
    $inputMessage.val('');
    ws.send(message);
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.