Building Real-time AppsUsing Web Sockets

Peter HimschootU2U TrainerMS Regional Director

About me…

Peter Himschootpeter@u2u.net

U2UTraining company based in BrusselsSpecialized in developer training For .NET, SharePoint, HTML5

www.u2u.be

Session Contents• Real-time communication• Web Sockets

Web Sockets

Real-time communication with

Real-Time web applications

“A real pain to build”

“Real time web” is awesome!!!

We need...• Full duplex communication• Using sockets

• Real-time, event driven apps• Tiny web packets

Ian Hickson

Keeping data up-to-datePo

llin

g

Server

Client

Lon

gPo

llin

g

Server

Client

Polling interval

“Comet”

A WebSocket is…

a socket that works anywhere across the web …even through network intermediaries

We get...• Bidirectional, single TCP socket• In & out of browser• Real time performance• Simple programming model• Bandwidth savings• Scalability advantages

On the Server

WebSockets

Steps on the server• Add a HttpHandler• Add a SocketReceiver• Send Messages

Add a HttpHandler• Check for websocket request

public class GameHttpHandler : IHttpHandler{ public void ProcessRequest(HttpContext context) { if (context.IsWebSocketRequest) { var player = new GamePlayer(); FourInABruGame.Join(player); context.AcceptWebSocketRequest(player.SocketReceiver); } }

Add a SocketReceiver• Receive JSON messagespublic async Task SocketReceiver(AspNetWebSocketContext context){ var socket = context.WebSocket as AspNetWebSocket; var buffer = new ArraySegment<byte>(new byte[2048]); while (true) { var message = await socket.ReceiveAsync(buffer, CancellationToken.None); // Convert to JSON var json = Encoding.UTF8.GetString(buffer.Array, 0, message.Count); var test = new { type = "" }; test = JsonConvert.DeserializeAnonymousType(json, test);

Send Messages• Best sent as JSON message

public async Task SendMessage(SocketMessage message){ string json = JsonConvert.SerializeObject(message); var buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(json)); await Context.WebSocket.SendAsync(buffer, WebSocketMessageType.Text, endOfMessage: true, cancellationToken: CancellationToken.None);}

On the Client

WebSockets

Steps on the client• Create a WebSocket• Process messages• Send messages

Create a WebSocket• Note websocket uri

var ws = new WebSocket(socketUri);ws.openStateConst = WebSocket.OPEN;

“ws://servername/socket”“wss://servername/socket”

Process messages• Handle open, message, close and error event

ws.onopen = function () { display('Connected');}

ws.onmessage = function (json) { processMessage(json);}

...

Send messages• Create object, then send as JSON

ws.send(JSON.stringify({ type: "wins", player: player }));

DemoWeb Sockets

Session Summary• Web Sockets is all about...• Real time communication• Efficient

Be what’s next• Find everything here

http://aka.ms/mbl-tech• Visual Studio Developer Preview Downloads

http://aka.ms/mbl-tech/devprev• MSDN HTML5 Developer Center

http://aka.ms/mbl-tech/html5

Q&A

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.