HTML onmessage Event Attribute

Description

The onmessage HTML event attribute specifies a JavaScript function to be executed when the object receives a message. It is typically used to handle messages sent from other windows, frames, or workers.

The onmessage event can be triggered by a variety of sources, including:

The postMessage() method, which can be used to send messages between windows, frames, and workers.
Server-sent events (SSEs), which are a way for servers to send real-time updates to clients.
WebSockets, which provide a full-duplex communication channel between a client and a server.

When an onmessage event is triggered, the event object contains the following properties:

data: The data contained in the message.
origin: The URL of the document that sent the message.
lastEventId: The identifier of the last message seen in the event stream.

To use the onmessage event attribute, you can assign a JavaScript function to it directly, or you can use the addEventListener() method. For example, the following code assigns a function to the onmessage event attribute of the window object:

<script>
window.onmessage = function(event) {
  // Handle the message
};
</script>

The following code uses the addEventListener() method to add a listener for the onmessage event:

<script>
window.addEventListener("message", function(event) {
  // Handle the message
});
</script>

The onmessage event attribute is a powerful tool for communicating between different parts of a web application. It can be used to implement a wide variety of features, such as:

Real-time chat applications
Multiplayer games
Data synchronization between different windows or tabs
Asynchronous communication between a client and a server

Here is an example of how the onmessage event attribute can be used to implement a simple chat application:

<!DOCTYPE html>
<html>
<head>
  <title>Chat Application</title>
</head>
<body>
  <input type="text" id="message" />
  <button type="button" onclick="sendMessage()">Send</button>
  <div id="chat"></div>

  <script>
    // Create a WebSocket connection to the server
    var ws = new WebSocket("ws://localhost:8080/chat");

    // Add a listener for the onmessage event
    ws.addEventListener("message", function(event) {
      // Display the message in the chat window
      var chat = document.getElementById("chat");
      chat.innerHTML += "<p>" + event.data + "</p>";
    });

    // Send a message to the server
    function sendMessage() {
      var message = document.getElementById("message");
      ws.send(message.value);
      message.value = "";
    }
  </script>
</body>
</html>

This code will create a WebSocket connection to the server at ws://localhost:8080/chat. When the Send button is clicked, the message in the message input field will be sent to the server. The server will then respond with a message, which will be displayed in the chat window.

The onmessage event attribute is a powerful tool for communicating between different parts of a web application. It can be used to implement a wide variety of features, such as real-time chat applications, multiplayer games, data synchronization, and asynchronous communication between a client and a server.

Syntax

<element onmessage="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

Currently no example, check back again soon.

Result

Editor

Browser Support

The following table will show you the current browser support for the HTML onmessage Event Attribute.

Desktop

Yes	Yes	Yes	Yes	Yes

Tablets / Mobile

Yes	Yes	Yes	Yes	Yes	Yes

Last updated by CSSPortal on: 14th October 2023

Support Us