HTML and CSS Reference
In-Depth Information
method will be suspended until the awaited task completes. In this case, the awaited task is to receive
incoming data and store it in an ArraySegment , a byte array. The results of the receive operation are stored
in a WebSocketReceiveResult object.
If the WebSocket is open, as indicated by the State property, the received data is echoed to the client
using the SendAsync() method. Before sending the message back to the client, you append a date-time
stamp to the message. If the State property has any value other than Open , the while loop is exited, thus
terminating the server.
n Note The System.Net.WebSockets and System.Web.WebSockets namespaces contain classes that deal
with server-side Web Socket programming. Detailed discussion of asynchronous programming in .NET and using
Web Socket classes is beyond the scope of this topic. Refer to the MSDN documentation to learn more about these
Developing the Web Socket Client
Now that you've completed the Echo server, let's develop the client web form that sends data to the Echo
server and receives echoed messages. Listing 11-17 shows the jQuery code that uses the HTML5 WebSocket
Listing 11-17. Using the HTML5 WebSocket Object
var socket;
$(document).ready(function () {
if (!Modernizr.websockets) {
alert(“This browser doesn't support HTML5 Web Sockets!”);
socket = new WebSocket(“ws://localhost:49428/WebSocketGenericHandler.ashx”);
socket.addEventListener(“open”, function (evt) {
$(“#divHistory”).append('<h3>Connection Opened with the Echo server.</h3>');
}, false);
socket.addEventListener(“message”, function (evt) {
$(“#divHistory”).append('<h3>' + + '</h3>');
}, false);
socket.addEventListener(“error”, function (evt) {
$(“#divHistory”).append('<h3>Unexpected Error.</h3>');
}, false);
This code declares a global variable named socket to hold a reference to a WebSocket object. The
jQuery ready() method first checks whether HTML5 Web Sockets are supported in the client browser. It
does so using the Modernizr's websockets property.
You then create a WebSocket instance by passing the URL of WebSocketGenericHandler.ashx . Notice
how the URL uses ws:// instead of http:// . Next, event handlers for the three events— open , message , and
error —are wired using the addEventListener() method. In the message event handler, the data sent by the
Echo server is retrieved using the property. The echoed data is then appended to a <div> element.
The other event handlers output the specified messages in the <div> element.
Search WWH ::

Custom Search