During a lunch break today I put together a small demo upon the XSockets WebSocket Server for .NET (Windows), the idea of the application came originally from a friend of mine , asking if it would be possible to du such thing just using HTML5, API’s that comes in the wake of HTML5 itself.
I used a favorite online tool of mine called JSBIN to develop the client (Web page) , I shortly describe what the “thing” does as-well as I will list the main “components” involved, then I will be showing the code itself , the JavaScript things. Further on in this blog post you'll find a URL to JSBIN, that URL will also enable you to clone and hopefully some astute will enhance the thing ( needs some UI fresh up )
A simple app giving a real-time Google Maps Street view experience by just using the browser in you iPhone! – As a friend of mine expressed himself!
So what is the “app” doing then?
By using the GeoLocation API, by using the currentPosition and watchPosition members of the GeoLocation object. We are able to get a one-shot (currentPosition) , the neat thing is that we also are are able to track the users movement. By broadcasting those movements on the WebSockets API (using XSockets.NET) other users is given the opportunity to follow each other upon an embedded map (Google Maps).
it is not much, but the thing gets quite cool (I think so ) if you ask a friend to “logon” and the take a walk, this of course requires a Geolocation, WebSockets enabled browser such as Safari for iPhone and iPad. Do I need a friend to test? No just visit http://jsbin.com/edorut/ with your iPhone and “follow” yourself
Does it work on other devices such as Androids? Yes, it does, but as we use JSBIN as webserver a XSockets.NET dev release not configured to use Fallbacks on Flash etc. Note that we recently added support for Hyby10 and Hybi07 protocols for XSockets.NET ( Also supports the FF6 MozWebSockets prefix ). Enough said about the application.
The WebSockets part I based on the Generic Websocket handler, so there is no specific server side code written for this, I just let the client deal with the small amount of logic that it requires.
Here is a short list of the ingredients used:
- JSBIN
- JavaScript
- jQuery
- XSockets.NET
- Google Maps
This is the code ( markup and Javascript) – You could also study and clone it on JSBIN - http://jsbin.com/edorut/
HTML
There is not much to mention, just some simple markup, unfortunately I did not have the time to add jQuery Mobile to get a better UI (feel free to clone fix )
<html>
<head>
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.js" type="text/javascript"></script>
<link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/themes/ui-darkness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript" src="http://xsockets.net/js/JXSockets.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<style>
#broadcasters a
{
display: block;
margin: 4px;
text-decoration: underline;
color: blue;
cursor: pointer;
}
body
{
font-family: Verdana;
}
</style>
</head>
<body>
<div id="signup">
<h1>
ISpy - Follow your friends?</h1>
<p>
Based on <a href="http://xsockets.net" target="_blank">XSockets.NET</a> (Generic
Handler) and Geolocation + GoogleMaps</p>
<p>
When you logon you will see a list of users, click one of thoose ( including yourself)
</p>
<label for="nickName">
Nick name:</label>
<input type="text" id="nickName" name="nickName">
<button>
GO</button>
</div>
<div id="broadcasters">
</div>
<div id="map" style="width: 100%; height: 440px">
</div>
</body>
</html>
JavaScript
I will not explain the code as you are able to study, modify and do whatever you desire at JSBIN – http://jsbin.com/edorut/
var marker = null;
var choosenNick = null;
var followMe = false;
var following = false;
var watchGuid = null;
var webSocket = null;
var guid = null;
var isSigned = false;
var options= {enableHighAccuracy:true, maximumAge:30000, timeout:27000};
var lastpos = null;
$(function () {
// get mt initial position (oneshot)
navigator.geolocation.getCurrentPosition(function(pos) {
lastpos = { coords:{ lat: pos.coords.latitude, lng: pos.coords.longitude }};
});
$("#map").hide();
guid = guidGenerator(); // Generate a uid for current user
var xHandler = "XSockets.Core.Handlers.Generic";
var wsUri = "ws://server:4502/" + xHandler;
// Create an instance of the Generic WebSocket Handler of XSockets.NET
webSocket = jXSockets.xWebSocket(wsUri, jXSockets.WEBSOCKET);
// WebSocket onopen / onclose events, we are not dealing with thosse at the mo.
webSocket.bind("open", function () {});
webSocket.bind("close", function () {});
$("button").bind("click",function(e){
e.preventDefault();
choosenNick = $("#nickName").val();
// Get "my" current position
var watchID = navigator.geolocation.watchPosition(successCallback,errorCallback,options);
$("#signup").fadeOut(function(){$("#broadcasters").fadeIn();});
// Send a mesage and get a list of "onliners"
var webSocketMessage = new $$.WebSocketMessage("OnWhosHere");
webSocketMessage.AddJson({});
webSocket.trigger(webSocketMessage.PayLoad());
isSigned = true;
});
// Capture the the reply on the OnWhosHere message event and att the users to a list
webSocket.bind("OnImBroadcasting",function(msg){
if(isSigned === false) return;
var list = $("#broadcasters a");
var f = false;
for(var i = 0;i<= list.length;i++){
if($(list[i]).data("guid") == msg.guid){
f = true;
break;
}
}
if(f === false){
var nick = "<strong>" + msg.nick + "</strong>";
if(msg.guid === guid) nick += " ( you ) ";
var currentLatLng = msg.pos.coords.lat + "," + msg.pos.coords.lng;
$("<a>").data("guid",msg.guid).data("pos",msg.pos).html(nick + currentLatLng).prependTo("#broadcasters");
}
});
// Current users listens to , show map etc.
$("#broadcasters a").live("click", function(e){
e.preventDefault();
watchGuid = $(this).data("guid");
var start = $(this).data("pos");
following = true;
$("#broadcasters").fadeOut("fast",function(){$("#map").show();init(start);});
});
// Some one just logged on, tell him that i'm online and broadcasting
webSocket.bind("OnWhosHere",function(msg){
if(isSigned === false) return;
var msg = { guid: guid,nick: choosenNick, pos: lastpos };
var webSocketMessage = new $$.WebSocketMessage("OnImBroadcasting");
webSocketMessage.AddJson(msg);
webSocket.trigger(webSocketMessage.PayLoad());
});
// Capture messages (geopositions) send by onliners, check if i'm following, if then show a marker etc
webSocket.bind("OnWatchPositionChange",function(msg){
if(following && msg.guid == watchGuid){
var p = new google.maps.LatLng(msg.pos.coords.lat,msg.pos.coords.lng);
if(marker !== null) marker.setMap(null);
addMarker(p);
}
});
});
// Add a marker to the Google Maps surface
function addMarker(p){
marker = new google.maps.Marker({ position: p, map: map,title: "Last known location of the person u are following"});
map.setCenter(p);
map.setZoom(17);
}
// Initialize the map; Should brag the last known position of the user that the client follows instead
// of just using any place in the world .-) Maybe some can clone and fix ?
function init(p){
var s = new google.maps.LatLng(p.coords.lat, p.coords.lng);
var myOptions = {
zoom: 4,
center: s ,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
addMarker(s);
}
// We got a successfull call back from geolocation.watchPosition method
function successCallback(pos){
var msg = {guid: guid,nick: choosenNick,pos: { coords:{ lat: pos.coords.latitude, lng: pos.coords.longitude }}};
var webSocketMessage = new $$.WebSocketMessage("OnWatchPositionChange");
webSocketMessage.AddJson(msg);
webSocket.trigger(webSocketMessage.PayLoad());
}
// Something is wrong, do somthing?
function errorCallback(err) {
// do stuff
}
// Generate a uinque id
function guidGenerator() {
var S4 = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
};
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
Enjoy, and let me know if you clone and do stuff to enhance, or if you got any questions regarding this or the XSockets.NET WebSocket Server
Kind regards
Magnus Thor
0 kommentarer:
Skicka en kommentar