.ace004•12mo ago

need to refersh page for message each time a user from different country sends a message

Hey I was going through the below deno chat app and found a bug which is the need to referesh the page each time a person from a different country sends a message how can this be fixed here is the link-https://showcase-chat.deno.dev/

4 Replies

Deno AI Helper•12mo ago

Based on the documentation, the chat application built with Deno uses web sockets for real-time communication. This means that once a client is connected to the server, they should be able to receive messages in real-time without needing to refresh the page. If you're experiencing an issue where you need to refresh the page to see new messages, it could be due to a problem with the web socket connection or the event handlers in the client-side JavaScript code. Here's a snippet of the client-side JavaScript code from the documentation:

// app.js

const myUsername = prompt("Please enter your name") || "Anonymous";
const socket = new WebSocket(
  `ws://localhost:8080/start_web_socket?username=${myUsername}`,
);

socket.onmessage = (m) => {
  const data = JSON.parse(m.data);

  switch (data.event) {
    case "update-users":
      // refresh displayed user list
      let userListHtml = "";
      for (const username of data.usernames) {
        userListHtml += `<div> ${username} </div>`;
      }
      document.getElementById("users").innerHTML = userListHtml;
      break;

    case "send-message":
      // display new chat message
      addMessage(data.username, data.message);
      break;
  }
};

function addMessage(username, message) {
  // displays new message
  document.getElementById(
    "conversation",
  ).innerHTML += `<b> ${username} </b>: ${message} <br/>`;
}

// app.js

const myUsername = prompt("Please enter your name") || "Anonymous";
const socket = new WebSocket(
  `ws://localhost:8080/start_web_socket?username=${myUsername}`,
);

socket.onmessage = (m) => {
  const data = JSON.parse(m.data);

  switch (data.event) {
    case "update-users":
      // refresh displayed user list
      let userListHtml = "";
      for (const username of data.usernames) {
        userListHtml += `<div> ${username} </div>`;
      }
      document.getElementById("users").innerHTML = userListHtml;
      break;

    case "send-message":
      // display new chat message
      addMessage(data.username, data.message);
      break;
  }
};

function addMessage(username, message) {
  // displays new message
  document.getElementById(
    "conversation",
  ).innerHTML += `<b> ${username} </b>: ${message} <br/>`;
}

This code listens for two types of events from the server: "update-users" and "send-message". When a "send-message" event is received, it calls the addMessage function to display the new message. If this isn't working as expected, you might want to check if there are any errors in the browser console that could help you debug the issue. If the issue is related to users in different

Deno AI Helper•12mo ago

countries, it could be due to network latency or other connectivity issues. In this case, you might want to consider using Deno Deploy's BroadcastChannel feature, which is designed to facilitate communication between edge workers in different data center regions, as mentioned in the documentation. However, without more specific information about the issue, it's hard to provide a definitive solution. I would recommend starting with these debugging steps and seeing if they help you identify the problem. 🦕

.ace004•12mo ago

this is my code I am already using broadcast api

.ace004•12mo ago

message.txt