wix-realtime is a real game changer for me, an I am sure it will be for many others?
This will allow instant messaging and also potentially in the future webcam face to face conversations.
I have been reviewing the documentation in the API reference on this amazing feature, I have followed the steps that I feel it is outlining however I am struggling to get it working (Connected), I have created the .js file as it suggests for the realtime-permissions router but when on client side, it doesnt seem to connect?
any help and support would be greatly appreciated.
I have tried to set up the way it advises on the API documentation, but I do not see how to create a message send? I understand that individuals have to be subscribed to channels, but how to you actually send a message, I can create the input easily if needs be but its understanding where or how the code in the backend knows there is a message to publish? I have provide an onclick function to the subscription but this i do not feel is the right way as it generate a new subscription ID each time?
any help or examples would be great.
Many thanks,
Si
export function button89_click(event) {
let channel = {
"name": "MembersOnly",
"resourceId": ownerId
};
let subscriptionId;
let message = $w("#input4").value;
wixRealtime.subscribe(channel, (message, channel) => {
let payload = message.payload;
let channelName = channel.name;
let resourceId = channel.resourceId;
if (message.publisher) {
let publisherId = message.publisher.id;
}
})
.then((id) => {
console.log(id);
subscriptionId = id;
$w("#input2").value = id;
});
}
$w.onReady(function () {
wixRealtime.onConnected(() => {
// handle connection
console.log("connected");
});
})
$w.onReady(function () {
wixRealtime.onDisconnected(() => {
// handle disconnection
console.log("disconnected");
});
})
$w.onReady(function () {
wixRealtime.onError((error) => {
let code = error.errorCode;
let message = error.message;
if (error.channel) {
let channelName = error.channel.name;
let resourceId = error.channel.resourceId;
}
});
})
$w.onReady(function() {
const channel = {
"name": "MembersOnly",
"resourceId": ownerId
};
wixRealtime.subscribe( channel, (message, channel) => {
$w("#updateMessage").text = message.payload;
$w("#updateBox").show();
});
$w("#hideUpdateButton").onClick( () => {
$w("#updateBox").hide();
});
});
“Channel: A specific channel on which messages are published.
Channel resource: A subchannel on which messages are published.”
The channel business suggests initial use cases related to blogs/forums or other dynamic pages that accept user messages - and you can subscribe to whatever interests you, and then get notification on the pages that allow for it.
I’m thinking along the lines of reddit/subreddit, etc.
Ah, I thought from real-time it was going to potentially like webRTC where you can send direct message in real-time and also share files or other pieces of data via the channel. It does say if you want to achieve peer to peer messaging this way it is achievable, the chatbox api I feel is a bit limited for what I would like to achieve but I will look at it again. It would also be great if there was the ability to have the channel used for sharing webcam streaming. Maybe I missed the point of this real-time piece? Si
Not sure from reading the API - have to see the use cases they are about to showcase.
I read up a bit on WebRTC implementations , and it seems to me that to implement a proper video chat service you need a STUN server - a service which resolves the IP addresses (NAT/IP) of the parties to the video chat.
Such a service is not too traffic intensive, so I think Wix should offer an API for video chat.
Understood, having it internally would I believe remove the need for a stun as it would be from one wix account to another which I believe the real-time should allow, it’s just a matter of enabling camera or webcam access which again with the enablement of the front end API’s shouldn’t be hard to achieve it’s just figuring out how to access the camera and using the real-time I believe. Si
hopefully this may be of some use to others? it is the start to a messaging system that can utilise the Wix Realtime API. It works as I am able to create channels and subscribers and listeners as well as sending links/documents and more across the channels. The code will need to be tidied up a bit and I haven’t provided the JSW modules either but much can be adapted from the Wix Realtime API. but using this can open the world to a number of possibilities that I am currently exploring. If any one wants any further code feel free to ask.
import wixData from 'wix-data';
import wixUsers from 'wix-users';
import { sendMessage } from 'backend/realtime.jsw';
import { publishMessage } from 'backend/realtime.jsw';
import { messageSent } from 'backend/realtime.jsw';
import * as realtime from 'wix-realtime';
import { subscribe, unsubscribe } from 'wix-realtime';
$w.onReady(function () {
});
realtime.onConnected(() => {
console.log("connected");
});
realtime.onDisconnected(() => {
console.log("disconnected");
$w("#VisitorSubscribe").show();
$w("#text24").hide();
$w("#userId").hide();
$w("#Disconnect").hide();
});
realtime.onError((error) => {
console.log("Error");
let code = error.errorCode;
let message = error.message;
if (error.channel) {
let channelName = error.channel.name;
let resourceId = error.channel.resourceId;
}
});
export function VisitorSubscribe_click(event) {
const channel = {
"name": "visitor",
"resourceId": $w("#roomId").value
};
let subscriptionId;
realtime.subscribe(channel, (message, channel) => {
let payload = message.payload;
let channelName = channel.name;
let resourceId = channel.resourceId;
if (message.publisher) {
let publisherId = message.publisher.id;
}
})
.then((id) => {
subscriptionId = id;
$w("#userId").text = subscriptionId;
$w("#VisitorSubscribe").hide();
$w("#text24").show();
$w("#userId").show();
$w("#Disconnect").show();
$w("#VisitorSend").enable();
});
}
export function Disconnect_click(event) {
const channel = {
"name": "visitor",
"resourceId": $w("#roomId").value
};
let subscriptionId = $w("#userId").text;
realtime.unsubscribe({ "subscriptionId": subscriptionId })
.then(() => {
$w("#VisitorSubscribe").show();
$w("#text24").hide();
$w("#userId").hide();
$w("#Disconnect").hide();
$w("#VisitorSend").disable();
$w("#roomId").value = "";
});
}
var attachment;
export function VisitorSend_click(event) {
visitorMessageSend();
onNewMessage();
}
function visitorMessageSend() {
$w("#VisitorSend").style.backgroundColor = "#AAAAAA";
let message = $w("#VisitorMessage").value;
let roomId = $w("#roomId").value;
let link = attachment;
let someChannel = "visitor";
const channel = {
"name": "visitor",
"resourceId": roomId
};
sendMessage(someChannel, roomId, message, link)
.then(() => {
onNewMessage();
channelMessages();
clearAttachment();
console.log(message);
console.log("Message sent");
$w("#VisitorMessage").value = "";
$w("#VisitorSend").style.backgroundColor = "#050505";
});
}
function clearAttachment() {
attachment = "";
$w("#uploadButton").reset();
}
function onNewMessage() {
let roomId = $w("#roomId").value;
const channel = {
"name": "visitor",
"resourceId": roomId
};
realtime.subscribe(channel, (message, channel) => {
let link = message.payload.link;
$w("#message").value = message.payload.message;
if (message.payload.message === "Typing") {
$w("#typingText").show();
$w("#typingBox").show();
} else {
$w("#typingText").hide();
$w("#typingBox").hide();
}
$w("#dateAndTime").text = message.payload.time;
$w("#dateAndTime").show();
$w("#message").show();
$w("#messageBox").show();
$w("#reportMessage").show();
$w("#closetext").show();
if (link.length === 0 || "" || null) {
$w("#phoDocBox").collapse();
$w("#phoDoc").collapse();
} else {
$w("#phoDocBox").expand();
$w("#phoDoc").expand();
$w("#phoDoc").src = link;
}
});
}
export function closetext_click(event) {
$w("#message").hide();
$w("#messageBox").hide();
$w("#closetext").hide();
$w("#dateAndTime").hide();
$w("#phoDoc").collapse();
$w("#phoDocBox").collapse();
}
function channelMessages() {
let roomId = $w("#roomId").value;
const channel = {
"name": "visitor",
"resourceId": roomId
};
realtime.subscribe(channel, (message, channel) => {
let link = message.payload.link;
$w("#recieved").value = message.payload.message;
$w("#dateAndTimeTwo").text = message.payload.time;
$w("#recieved").show();
$w("#recievedMessages").show();
$w("#dateAndTimeTwo").show();
$w("#reportMessageTwo").show();
$w("#closeTextTwo").show();
if (link.length === 0 || "" || null) {
$w("#phoDocBoxTwo").collapse();
$w("#phoDocTwo").collapse();
} else {
$w("#phoDocBoxTwo").expand();
$w("#phoDocTwo").expand();
$w("#phoDocTwo").src = link;
}
});
}
export function closeTextTwo_click(event) {
$w("#recieved").hide();
$w("#recievedMessages").hide();
$w("#closeTextTwo").hide();
$w("#dateAndTimeTwo").hide();
$w("#phoDocTwo").collapse();
$w("#phoDocBoxTwo").collapse();
}
export function documentLink_click(event) {
$w("#uploadButton").fileType = "Document";
$w("#uploadButton").show();
$w("#upload").show();
$w("#documentLink").hide();
$w("#photoLink").hide();
}
export function photoLink_click(event) {
$w("#uploadButton").fileType = "Image";
$w("#uploadButton").show();
$w("#upload").show();
$w("#documentLink").hide();
$w("#photoLink").hide();
}
export function upload_click(event) {
if ($w("#uploadButton").value.length > 0) {
console.log("Uploading " + $w("#uploadButton").value[0].name);
$w("#uploadButton").startUpload()
.then((uploadedFile) => {
if ($w("#uploadButton").value.length < 0) {
attachment = "";
console.log("no attachment");
} else {
attachment = uploadedFile.url;
console.log("Upload successful. File is available here:");
console.log(uploadedFile.url);
}
})
.catch((uploadError) => {
console.log("File upload error: " + uploadError.errorCode);
console.log(uploadError.errorDescription);
});
} else { // site visitor clicked button but didn't choose a file
console.log("Please choose a file to upload.")
}
}
export function reportMessage_click(event) {
//Add your code for this event here:
}
export function reportMessage2_click(event) {
//Add your code for this event here:
}
$w.onReady(function () {
$w("#VisitorMessage").onKeyPress((event, $w) => {
if (event.key === "Enter") {
visitorMessageSend();
onNewMessage();
}
})
})
@marlowe-shaeffer Hi Marlowe, thank you, I am unsure as to how to do this but will have a look, I thought if the principle could help anyone to develop a realtime communications channel it would be great, I am currently utilising the realtime API to create a blockchain and crypto currency also, a little difficult at times not being a coder but getting there.
@simonadams Hi Simon, I only suggested it because a lot of members subscribe to that category specifically for such examples. We appreciate your contributions!