Hi @Teodor,
I need to use real-time data in the project that I will start shortly. When will we be able to test realtime data with socket.io.
4 Likes
It is in development, but will take a while till it is fully integrated in Wappler. You can already play with it if you want.
edit or create the app/config/config.json:
{
"debug": "false",
"secret": "XAgWjRFnlJqKCUb",
"enableSockets": true
}
Add the enableSockets and set it to true.
In the index.js you can now use it like:
const server = require('./lib/server');
server.io.on('connection', (socket) => {
socket.on('chat message', (msg) => {
server.io.emit('chat message', msg);
});
});
server.start();
In the html page you use it like:
<!DOCTYPE html>
<html>
<head>
<title>socket.io test</title>
</head>
<body>
<form id="frm">
<input id="msg">
<button type="submit">Send</button>
</form>
<ul id="list"></ul>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var frm = document.getElementById('frm');
var msg = document.getElementById('msg');
var list = document.getElementById('list');
frm.addEventListener('submit', function(e) {
e.preventDefault();
socket.emit('chat message', msg.value);
msg.value = '';
});
socket.on('chat message', function(msg) {
var li = document.createElement('li');
li.textContent = msg;
list.appendChild(li);
});
</script>
</body>
</html>
Plans is to have a visual editor like with server connect for the socket.io. Also implementation can change.
9 Likes
Please post here some feedback of what you are making with socket.io. Do you make use of the namespaces and rooms or do you just use it for simple notifications? We are still not exactly sure which features we have to include and what kind of integration with App Connect and Server Connect is needed. So some feedback on how you guys would like to use it will be welcome.
I haven’t used socket but reflecting data updates of other users without polling would be great.
Currently I’m building on php an SSE that does the polling of db server side and pushes a notification to clients which then just reloadS server connect components as needed.
I think messaging applications or reporting dashboards are the main use cases for me. Each messaging channel, or graph on a dashboard, is a different Namespace.
I’ve read that the difference between Namespaces and Rooms is that Namespaces are for predefined connections. Whereas Rooms are for dynamic connections.
I think we’ll need a pub/sub store at some point. Not sure if this is already being discussed. https://www.ably.io/concepts/socketio
1 Like
This is what I would probably find most useful about it too. However, I know little about it so am probably not be aware of the potential.
I am currently working with namespace and room (I’m trying.). Using namespace and room actually makes more sense. I think it would be a wider and better solution to separate the works into the namespace and to do these works in the rooms.
and it seems very nice to be able to provide real-time data flow with Socket.io. ( that is, to be able to read data from serverconnect in real time. )
I don’t know what other friends are thinking. Do you think it makes sense . what do you think @patrick
const http = require("http");
const socket = require("socket.io");
const server = http.createServer((request, response) => {
response.end("...");
});
server.listen(1234);
const io = socket.listen(server);
const xnamespace = io.of("/xnamespace");
const ynamespace = io.of("/ynamespace");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<script>
const socket = io.connect("http://localhost:1234/xnamespace");
</script>
</head>
<body>
</body>
</html>Too smart for my brain, I will have to trust whatever you guys choose, lol
If you have different apps like a chat page and some notifications, I would put them in separate namespaces. The chat app could have rooms, like a public general room and private rooms. Rooms you can join and leave. You could build something like slack or discord.
1 Like
I really wonder how you will plan a visual interface. it would actually make sense to have a preview and get feedback from users.
We were thinking a bit like with the flows, you have endpoints listening to specific messages that trigger then a specific flow. So a bit like server connect but then with live data connection and two direction communication. On client and server you then have methods to send messages with data and on the other site you react to them using something like our flows.
1 Like
That makes sense.
I am assuming that those endpoints, data and messages will be exposed somehow in case we need to integrate them with other libraries or custom code. Same as with everything in Wappler.
It would be like with the routes, it will auto generate the listeners to listen to a specific message in some specific namespace and execute a flow when it receives the a message.
Here a sample, it is just an idea, there is no implementation at this moment. We would have some json that defines the endpoints like:
{
"/chat": {
"message": "incoming_message",
"join": "join_room",
"leave": "leave_room"
}
}
This would generate code like:
io.of('/chat').on('connection', (socket) => {
socket.on('message', runFlow('incoming_message'));
socket.on('join', runFlow('join_room'));
socket.on('leave', runFlow('leave_room'));
});
The flows are like you already know them in Wappler, they will have extra actions to emit messages, join/leave rooms etc.
On the client-side it would be the same, probably some app connect component that will be used to listen to messages and you then trigger flows to do something with the message and data you receive. We still have nothing created for this, so any input is welcome.
You can also write your own JavaScript code, but then you will be missing the integration with Wappler and with App/Server Connect.
3 Likes
Hello @patrick
I don’t want to write my own javascript code. It is better and understandable for me to be fully integrated with wappler. Of course, specific codes can be added. But it is not necessary for now.
Is there more time for real-time data and socketio integration?
1 Like
@patrick checking in on this and the progress to integrate socket.io into Wappler. Any ideas around timeframes?
2 Likes
The first few updates will mainly focus on bug fixes, stability and perhaps some small new features. After that we will have a look on which new features we will include and socket.io is one of them, but can’t say any timeframe at this moment.
4 Likes
Ok, thank you!
I would be interested in using the real time data update for an auction platform. example user a bids it updates certain fields, also with the bid user b page would update with the new bid price. Another sample would be when a new bid comes in there would be a sound to alert the user of the need bid and maybe even have that auction item flash as well.
2 Likes