%20-%20Copy.png)
Wix code Advance
Wix release the new wix-realtime which allow developers to build interactive apps like chat app, multi-player game etc.
So, In this example i will discuss how we can build a chat app where a user can send a message to person B and person B immediatly get the message.
If you want to test it live here is the link:
https://test.salman2301.com
Overview
Front-end we use custom element, which allows to show the message side by side and also with custome element, we can have a fix height and scroll bar so user can scroll to previous messages. We can use repeater for this but we need to use pagination or infinite scrolling which is why i didn't.
On the Backend, we use wix-realtime API with datahook
- datahook runs the code when a new row is inserted in the database.
- realtime API allow us to do pub/sub ( publish/ subscriber) where sender or publisher send message to a channel and the reciever or subscriber can reciver the message.
Dataflow
If a user Person A send a message to Person B, the message will be inserted in the database and this runs the afterInsert data hook and the data hook use realtime api to publish to a channel, the name of the channel is same as the Person B user id. In this way, only the person B recieve the message and On the front-end, let's assume that the person B is online and we subscribe to the channel and the name of the channel Is the current user id. We get the user id from wix-user module wixUser.currentUser.id.
Database
Database Name: message
Fields:
field_key data
from - USER_ID
to - USER_ID
message - Message
Code
// backend/data.js
import {publish} from 'wix-realtime-backend';
// datahook runs when a new row is inserted in the database
// item contains inserted row information { from: "uuid", to:"uuid", message:"hello"}
export function message_afterInsert(item, context) {
const { from, to, message, _id } = item;
const channel = { name : to};
let data = {
message,
from,
_id
};
// publish which take a channel name and data.
publish(channel, data, {includePublisher: true});
return item;
}
// Page code
import * as realtime from "wix-realtime";
import wixUsers from "wix-users";
import wixData from "wix-data";
import { getUsers, getMe } from "backend/getUsers.jsw";
let lastUserId, lastLoginEmail, lastPicture;
let userId = wixUsers.currentUser.id;
let owner;
$w.onReady(function () {
// $w('#dataset1').onReady(init);
init();
$w("#inSearch").onKeyPress((e) => {
setTimeout(() => {
if (e.key === "Enter") filterMem();
if (e.key === "Escape") {
$w("#inSearch").value = "";
filterMem();
}
}, 40);
});
$w("#ChatElement").setAttribute(
"append-msg",
JSON.stringify({
user: {
name: "salman",
},
msg: " Hello this is a test",
date: new Date().toISOString(),
isOwner: true,
})
);
getMe().then((data) => {
owner = data;
});
});
function init() {
// wix real time
const channel = { name: userId };
realtime.subscribe(channel, newMessage);
// update UI
filterMem();
// events
$w("#repeaterUser").onItemReady(($item, itemData, i) => {
let { loginEmail, picture } = itemData;
$item("#image1").src = picture;
$item("#textEmail").text = loginEmail;
});
$w("#containerUser").onClick((e) => {
switchUser(e.context.itemId);
});
$w("#btnSend").onClick(sendMessage);
$w("#inMessage").onKeyPress((e) => {
const { ctrlKey, key } = e;
if (key === "Enter" && !ctrlKey) {
sendMessage();
}
});
}
async function filterMem() {
let inMember = $w("#inSearch").value || undefined;
getUsers(inMember)
.then((data) => {
$w("#repeaterUser").data = data.items;
if (!lastUserId) {
switchUser(data.items[0]._id);
}
})
.catch(console.error);
}
async function switchUser(toUserId) {
lastUserId = toUserId;
$w("#repeaterUser").onItemReady(($item, itemData, i) => {
let { _id, loginEmail, picture } = itemData;
if (_id === toUserId) {
$item("#imgCurrUser").show();
$w("#textHeadUser").text = `Connected to ${loginEmail}`;
lastLoginEmail = loginEmail;
lastPicture = picture;
refreshMsg();
} else {
$item("#imgCurrUser").hide();
}
});
}
async function newMessage({ payload }) {
appendMsg(payload._id);
}
async function refreshMsg() {
$w("#ChatElement").setAttribute("messages", "[]");
let resMsgs = await wixData
.query("message")
.eq("from", userId)
.eq("to", lastUserId)
.or(wixData.query("message").eq("from", lastUserId).eq("to", userId))
.ascending("_createdDate")
.find();
let msg = resMsgs.items;
let username = lastLoginEmail.split("@")[0];
msg = msg.map((el) => {
let isOwner = userId === el.from;
let userImage = isOwner ? owner.picture : lastPicture;
userImage = encodeURI(userImage);
if (!userImage.startsWith("https://")) userImage = undefined;
return {
_id: el._id,
isOwner: isOwner,
user: {
name: username,
image: userImage,
},
msg: el.message,
date: el._createdDate,
data: el,
};
});
$w("#ChatElement").setAttribute("messages", JSON.stringify(msg));
if (msg.length === 0) {
$w("#textNoMsg").show();
} else {
$w("#textNoMsg").hide();
}
}
async function appendMsg(msgId) {
let resMsgs = await wixData.query("message").eq("_id", msgId).find();
let message = resMsgs.items[0];
console.log({ resMsgs });
let username = lastLoginEmail.split("@")[0];
let isOwner = userId === message.from;
let userImage = isOwner ? owner.picture : lastPicture;
userImage = encodeURI(userImage);
if (!userImage.startsWith("https://")) userImage = undefined;
let msg = {
_id: message._id,
isOwner: isOwner,
user: {
name: username,
image: userImage,
},
msg: message.message,
date: message._createdDate,
data: message,
};
if (!(lastUserId === message.from || lastUserId === message.to)) {
console.error(" No for the current user show alert!");
return;
}
$w("#ChatElement").setAttribute("append-msg", JSON.stringify(msg));
}
async function sendMessage() {
try {
$w("#btnSend").disable();
let msg = $w("#inMessage").value;
if (!msg) return;
let toInsert = {
from: userId,
to: lastUserId,
message: msg,
};
let inserted = await wixData.insert("message", toInsert);
appendMsg(inserted._id);
$w("#btnSend").enable();
$w("#inMessage").value = "";
} catch (e) {
console.log("ERROR : ", e.message);
$w("#btnSend").enable();
$w("#inMessage").value = "";
}
}
For the custome element check my github
https://github.com/Salman2301/wix-chat-component
Like