[[ixnx:wrtc:js:tutorial:start|Tutorial]] step 8:
====== Step 8: Online List ======
Entering the name of who you want to call manually is flexible, but inconvenient. It would be better to see a list of people you can call. [[ixnx:wrtc:js:api:wrtc:ononlinelist|wrtc.onOnlineList()]] gives you a list of all people connected to the IXNX server:
'' \\
%%%% \\
\\
\\
%% \\
%%%%
\\
\\
\\
''
[[ixnx:wrtc:js:api:wrtc:ononlinelist|wrtc.onOnlineList()]] is not a full-blown presence handler, it only lists all users currently online, connected to the same IXNX unit you are. For real SIP presence handling please see functions [[ixnx:wrtc:js:api:wrtc:setsippresence|wrtc.setSIPPresence()]], [[ixnx:wrtc:js:api:wrtc:setsipsubscribe|wrtc.setSIPSubscribe()]] and [[ixnx:wrtc:js:api:wrtc:onsippresence|wrtc.onSIPPresence()]].
The websocket server in your IXNX unit will automatically send out an updated list of online clients to all connected clients each time the list changes. When wrtc_kit receives such a list it will call [[ixnx:wrtc:js:api:wrtc:ononlinelist|wrtc.onOnlineList()]].
The list argument the function receives contains a JSON object containing a list of all users online – including yourself:
{"type":"who","users":[{"name":"Adam","state":"OK"},{"name":"Eva","state":"busy"}]}
[[ixnx:wrtc:js:api:wrtc:ononlinelist|wrtc.onOnlineList()]] does the following:
wrtc.onOnlineList = function(list) {
const online_ul = document.getElementById('online');
online_ul.innerHTML = "";
list.users.forEach(user => {
if (user.name != wrtc.addressName) {
var entry = document.createElement("li");
if (user.state.match(/OK/)) {
var a = document.createElement("button");
a.textContent = user.name;
a.onclick = function() {wrtc.call(user.name)};
entry.appendChild(a);
}
else
entry.textContent = user.name;
online_ul.appendChild(entry);
}
});
};
- it steps through all users listed in the JSON object
- object property [[ixnx:wrtc:js:api:wrtc:addressname|wrtc.addressName]] contains your username, and is used to avoid displaying yourself in the list
- the user's state can be ”OK” or ”busy” depending on if they are available for calling or already busy talking to someone.
- if the user in the list is in ”OK” state, we create a clickable button. If you click on it function [[ixnx:wrtc:js:api:wrtc:call|wrtc.call()]] will be called with that name, resulting in a call being placed to that user.
- if the user in the list is busy in a call then you should not be able to call them. To avoid it the user is only listed as a non-clickable text string.
Yes, a click-to-call presence list is this easy to implement. This example code creates a butt-ugly list, but it works. You can create much nicer lists, with small green and red icons for available and busy users, and little telephone icons to call them.
//(The reason why we check for state.match(/OK/) in the code is because there actually is a third state apart from "OK" and "busy", called "buOK" = currently in call, but you can call in and join the call – but that is beyond the scope of this basic tutorial.)//
**[[ixnx:wrtc:js:tutorial:step9|Step 9: Cookie!]]**