Websockets

In order to send and receive messages in real-time, you'll need to use websockets. When you connect to the socket, you will need to pass the user's jwt token.

How to use websockets

In order to send and receive messages in real-time, you'll continue to use the Avon APIs to create and send messages as usual. In addition, you'll need to notify the Avon websocket server so that the UI knows to refresh with updated information in real-time.

Sending updates

When you are sending updates (e.g. creating a message, updating a message, or deleting a message), you'll call socket.emit with the appropriate event name (e.g. "message_created", "message_updated", or "message_deleted").

Example create message in React

import io from "socket.io-client";

// Add message to database
const link: string = "https://{{base_subdomain}}.avonhealth.com/v2/message_threads/{{messageThread.id}}/messages";

const response = await axios.post(
  link,
  message,
  {
    headers: {
      account: accountID,
      "x-jwt": jwtToken,
      Authorization: `Bearer ${token}`,
    },
  }
);

// Notify socket
const socket = io(https://{{base_subdomain}}.avonhealth.com,  {
  auth: {
    token: jwtToken,
  },
  withCredentials: false,
}); // Connect to the server
socket.emit("message_created", message);

Example update message in React

import io from "socket.io-client";

// Update message in database
const link: string = "https://{{base_subdomain}}.avonhealth.com/v2/message_threads/{{messageThread.id}}/messages/{{message.id}}";

const response = await axios.post(
  link,
  message,
  {
    headers: {
      account: accountID,
      "x-jwt": jwtToken,
      Authorization: `Bearer ${token}`,
    },
  }
);

// Notify socket
const socket = io(https://{{base_subdomain}}.avonhealth.com,  {
  auth: {
    token: jwtToken,
  },
  withCredentials: false,
}); // Connect to the server
socket.emit("message_updated", message);

Example delete message in React

import io from "socket.io-client";

// Delete message from database
const link: string = "https://{{base_subdomain}}.avonhealth.com/v2/message_threads/{{messageThread.id}}/messages/{{message.id}}";

const response = await axios.delete(
  link,
  {
    headers: {
      account: accountID,
      "x-jwt": jwtToken,
      Authorization: `Bearer ${token}`,
    },
  }
);

// Notify socket
const socket = io(https://{{base_subdomain}}.avonhealth.com,  {
  auth: {
    token: jwtToken,
  },
  withCredentials: false,
}); // Connect to the server

socket.emit("message_deleted", message);

Receiving updates

When you are receiving updates (e.g. being notified about a new, updated, or deleted message), you'll call socket.on with the appropriate event name (e.g. "message_created", "message_updated", or "message_deleted").

Example receiving new message in React

import io from "socket.io-client";

// Notify socket
const socket = io(https://{{base_subdomain}}.avonhealth.com,  {
  auth: {
    token: jwtToken,
  },
  withCredentials: false,
}); // Connect to the server

socket.on("connect", () => {
  console.log("Socket connected:", socket.connected); // Check connection status after successful connection
});

// Handler for created messages
socket.on("message_created", (createdMessage: Message) => {
  console.log("New message created:", createdMessage);
  // Do something with the new message
});

Example receiving updated message in React

import io from "socket.io-client";

// Notify socket
const socket = io(https://{{base_subdomain}}.avonhealth.com,  {
  auth: {
    token: jwtToken,
  },
  withCredentials: false,
}); // Connect to the server

socket.on("connect", () => {
  console.log("Socket connected:", socket.connected); // Check connection status after successful connection
});

// Handler for updated messages
socket.on("message_updated", (updatedMessage: Message) => {
  console.log("Message updated:", updatedMessage);
  // Do something with the updated message
});

Example receiving deleted message in React

import io from "socket.io-client";

// Notify socket
const socket = io(https://{{base_subdomain}}.avonhealth.com,  {
  auth: {
    token: jwtToken,
  },
  withCredentials: false,
}); // Connect to the server

socket.on("connect", () => {
  console.log("Socket connected:", socket.connected); // Check connection status after successful connection
});

// Handler for deleted messages
socket.on("message_deleted", (deletedMessage: Message) => {
  console.log("Message deleted:", deletedMessage);
  // Do something with the deleted message
});