Learn Skype Web SDK Day 5 : Subscribe to Changes in your own Presence / Information
This is one post in a series of more than 30, devoted to helping you get up to speed quickly with the new Skype Web SDK. Each lesson comes with source code (in GitHub) and a working demo page so you can see what it does. Check out the full list of posts on the Skype Web SDK page.
View Demo
In the last post we covered getting your own presence, by reading the state of the mePerson object. However, as I mentioned, because of the asynchronous way that Skype for Web works, sometimes you might read that property and find that’s it’s empty (or Undefined).
You may also want to react in your application when your state changes, such as changing the colour of a presence bar, or just updating a “Presence State” label.
The Skype for Web API allows you to code against the presence state changing. You do this by registering an event listening for the changed() event of the state, and then calling subscribe() on the object to begin the subscription process:
var client;
<!-- create client object and do sign-in process here -->
client.personsAndGroupsManager.mePerson.status.changed(function(newStatus) {
<!-- The presence status has changed. The new presence value is in newStatus. -->
alert('Status Changed to: ' + newStatus);
});
client.personsAndGroupsManager.mePerson.subscribe();
In practice, I’ve found that it’s not actually necessary to call subscribe() on the mePerson object – you’ll get the changed events even if you don’t. However, this isn’t documented behavior and could change in a future update so it’s best to keep it in.
Alongside presence, the activity field is used to provide additional information. For instance, when you make a phone call, your presence state changes to Busy. Your activity field also changes to a special activity on-the-phone. This is why, in the Lync Client, you see “In a Call” rather than just Busy.
You subscribe to activity changes in exactly the same way:
<!-- do sign-in process here -->
client.personsAndGroupsManager.mePerson.activity.changed(function(newActivity) {
<!-- The activity has changed. The new activity value is in newActivity. -->
alert('Activity Changed to: ' + newActivity);
});
client.personsAndGroupsManager.mePerson.subscribe();
In the example, I’ve used two span labels to show both the Presence and the Activity. You can try logging in with a Lync client (as the same user) and placing audio calls to see the presence and activity statuses change.
When you’re done with a subscription, you should unsubscribe it, to converse resources. If you don’t, the server will continue to send you notifications about presence changes – you just won’t be handling them. Being a good developer and cancelling presence subscriptions you don’t need can make your application more response and your users happier.
To unsubscribe, call dispose() instead of subscribe(). So, to unsubscribe from your own subscriptions call:
client.personsAndGroupsManager.mePerson.dispose();
Here’s the full code sample, showing all of these separate functions in use together:
<div class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="username" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="btnLogIn">Log in</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="btnLogOut">Log out</button>
</div>
</div>
</div>
<div>
<span id="loginStatus">...</span>
<span id="presenceStatus">...</span><br/>
<span id="activityStatus">...</span><br/>
</div>
<script type="text/javascript">
var client;
$(function () {
'use strict';
Skype.initialize({
apiKey: 'SWX-BUILD-SDK',
}, function (api) {
client = new api.application();
// whenever client.state changes, display its value
client.signInManager.state.changed(function (state) {
$('#loginStatus').text("Login State: " + state);
});
}, function (err) {
alert('Error loading Skype Web SDK: ' + err);
});
$('#btnLogIn').click(function () {
// start signing in
client.signInManager.signIn({
username: $('#username').val(),
password: $('#password').val()
}).then(function () {
//log in worked!
alert('Logged in!');
SubscribeToPresenceChanges();
}, function (error) {
//Something went wrong.
alert(error);
});
});
$('#btnLogOut').click(function () {
// start signing out
client.signInManager.signOut()
.then(function () {
//log out worked!
alert('Logged out!');
}, function (error) {
//Something went wrong.
alert(error);
});
});
function SubscribeToPresenceChanges()
{
client.personsAndGroupsManager.mePerson.status.changed(function(newStatus) {
$('#presenceStatus').text("Presence:" + newStatus);
});
client.personsAndGroupsManager.mePerson.activity.changed(function(newActivity){
$('#activityStatus').text("Activity:" + newActivity);
});
client.personsAndGroupsManager.mePerson.subscribe();
}
});
</script>
Demo Online
You can try this code out against your own Skype for Business environment by going to the demo page. From here you can also download the code from GitHub if you want to host it locally, or take it and use it in your next project.
Good to Know
- Before you can run this code, make sure you've read my post on all the prerequisites you need to have in place.
- You don't have to copy the code from here - it's all on GitHub!
- If you liked this post, there are more! Check out the dedicated Skype for Web SDK Collection page, or signup to the newsletter
- Need a Skype for Web SDK solution, but not in a position to build yourself? Hire me!
Written by Tom Morgan
Tom is a Microsoft Teams Platform developer and Microsoft MVP who has been blogging for over a decade. Find out more.
