Real-Time API

Hello everyone !!!
I think this post will help some who are creating social-networking sites…

So, here’s what I am going to show you…
There are 2 users - User A and User B
User A is in State A and User B is in State B

So, when User A types something in an input, a text (inside a box) will show in the page of User B at the same time

The code will give you more info →

  1. You should create a .jsw file and rename it as realtime.jsw
//realtime.jsw

import { publish } from 'wix-realtime-backend';

export function publishMessage(message) {
 const channel2 =  { name: 'messaging' };
 return publish(channel2, { message: message }, { includePublisher: false });
}

Here’s the page code →

import { publishMessage } from 'backend/realtime';
import * as realtime from 'wix-realtime';

$w.onReady(function () {
 const channel2 = { name: 'messaging' };
    realtime.subscribe(channel2, type);
    
    $w('#input').onInput((event) => {
      return publishMessage(wixUsers.currentUser.id);
   });
   
   async function type({ payload }) {
  if ($w('#notificationBox2').hidden) {
                $w('#notificationText2').text = "user is typing";
                $w('#linkButton2').link = payload.link;
                $w('#notificationBox2').show('fade');
                setTimeout(() => $w('#notificationBox2').hide('fade'), 3000);
            } else {
                setTimeout(() => type({ payload }), 3000);
            }
     

        }
  });

Anyone can make necessary changes !!!

3 Likes

Wow! Nice tutorial! I didn’t know you can use this api for this! I thought the real time api is a subscription thing (a bit like YouTube).

Thanks !!!

Hi can you help me with this real-time API and hook. I want to build a page feature in which when some item field value is changed by some want, then other people can recieve that in reatime without refresh the webpage. I can pay for that.

Check here → https://www.wix.com/velo/example/real-time-notifications-for-real-estate

@ajithkrr Thanks :slight_smile:

Hi could there be a more visual reference on this description? it would help immensely! thanks in

Learn more: https://support.wix.com/en/article/velo-tutorial-sending-messages-with-the-realtime-api

Thanks much @certifiedcode we will look into this.

Here’s another example:

Create a Simple Messaging App!
https://www.wix.com/velo/forum/tips-tutorials-examples/create-a-simple-messaging-app

Hello @ajithkrr how can I contact you about this? I have worked through your code and I have one single problem. Notification goes to both parties and not just the recipient (other end). Can you help me?