Saturday, January 8, 2011

HTML5: Installing the Microsoft WebSockets prototype

In December Microsoft launched the HTML5 Labs for experimental HTML5 technologies still under development. With the launch, they also released a WebSockets prototype.

In this post I will lead you through the process of installing the WebSockets prototype on your machine. By the end of this tutorial you should have a working chat web application sample.

Download

First you need to download and run the WebSockets prototype installer.

This package installs the binaries and samples in the %ProgramFiles%\Microsoft SDKs\WCF WebSockets\10.12.16 folder.

Enable IIS

Make sure IIS is enabled on your machine. You can verify this by using the Windows feature configuration tool.


Configure the Windows Firewall

You need to allow incoming TCP traffic on port 4502 in the Windows Firewall.

Open the Windows Firewall and add a new inbound rule.


To add a new inbound rule you need to follow the five steps of the wizard.

First you need to define the type of rule you want to create: Port.


The protocol you need to use is TCP and the specific port you want to open is 4502.


When connections are attempted through the port we specified, they should be allowed.


This rule should always be applied (for me).


Finalize the wizard by specifying a name for the rule.


Deploy the client access policy

Copy the %ProgramFiles%\Microsoft SDKs\WCF WebSockets\10.12.16\bin\clientaccesspolicy.xml file to the %SystemDrive%\inetpub\wwwroot folder.

Make sure the file is accessible by navigating to http://localhost/clientaccesspolicy.xml.

Start the ChatService

Start %ProgramFiles%\Microsoft SDKs\WCF WebSockets\10.12.16\bin\ChatService.exe.

Because the ChatService assembly is delay signed, and not fully signed, it will throw an unhandled System.Security.SecurityException: Strong name validation failed.


To turn off strong name signing for this assembly you can use sn.exe. Execute the following command:
sn -Vr "%ProgramFiles%\Microsoft SDKs\WCF WebSockets\10.12.16\bin\ChatService.exe"

Pay attention:
  • The command arguments are case sensitive. It's -Vr.
  • If you are running a 64 bit OS you have to use the 64 bit version of the tool. I used the Visual Studio x64 Win64 Command Prompt (2010).
  • If you are using the Visual Studio Command Prompt you need to run it as an administrator.


Once these problems are fixed, you can finally start the ChatService.


Deploy the Chat web application

Create a chat virtual directory in IIS mapped to the %ProgramFiles%\Microsoft SDKs\WCF WebSockets\10.12.16\web\chat directory.


Test the web application

If you followed all these steps, you should be able to navigate to http://localhost/chat/wsdemo.html and see the results of your efforts. Victory!


Problems?

If you are still facing some problems, feel free to let me know in the comments.

33 comments:

  1. Hi Jeff I followed the steps as you explained here.
    But after all that, when I opened the "http://localhost/chat/wsdemo.html", it showed me the Web Socket with "Scoket Closed" Red sign.

    Could you please help on this issue?

    ReplyDelete
  2. The websocket gets opened when you press enter in the textbox on the wsdemo.html page. Did you do that?

    If you did that, try setting a breakpoint in the constructor of the Service class, and try opening the websocket again.

    If the breakpoint is not getting hit, you should try using script debugging on the client using the IE9 developer tools.

    Please let me know your findings :)

    ReplyDelete
  3. Hi Jeff I followed the steps you explained here after I download the latest prototypes and example from HTML 5 Lab website, but after all that, when I opened the "http://localhost/chat/wsdemo.html", it showed me the Web Socket with "Scoket Closed" Red sign. What can I do to figure out why is it not working?

    ReplyDelete
  4. Did the server start successfully? Have you deployed the Client Access Policy file?

    ReplyDelete
  5. Yes, the server start successfully. I compile the servers from websocketsamples.zip and they all compiled and start successfully. But the client seems to fail to connect to these servers and in the debugger, the client get HttpUpgradeException from the WCF WebSocket library.

    I notice that tracing through the source code of the server, for example, the chat server, the websocket version that is setup in the config.cs file is WebSocketVersion.v03; is this correct ? is the websocketsample.zip up to date with the latest websocket library update on HTML 5 Lab Site ?

    ReplyDelete
  6. Ha, that HttpUpgradeException is not good. You need to make sure Client and Server are using the same version of the WebSockets protocol.

    Did you pull the latest source for Server and Client from here: http://html5labs.interoperabilitybridges.com/prototypes/websockets/websockets/info?

    ReplyDelete
  7. I have it working on Chrome, but when I try it on my iphone with the latest iOS 4.3.5, it can't connect. And to make sure the iphone supports websocket I went to http://websocket.org/echo.html and tested it with my iphone and everything works fine. Do you know why that is?

    Thanks.

    ReplyDelete
  8. What version of the protocol is implemented by the browser you are running on iOS 4.3.5?

    ReplyDelete
  9. Hi Jeff,

    I new to websocket and download the latest prototype (WCF WebSockets\11.06.22). I had follow your step give but when I run the ~\Program Files (x86)\Microsoft SDKs\WCF WebSockets\11.06.22\bin\ChatTestClient.exe it just show me "No connection could be made because the target machine active required URI:/chat.
    Can you tell me how to fix? thx

    ReplyDelete
  10. Jon, have you opened the firewall ports?

    ReplyDelete
  11. Yap.. I did open the inbound and outbound Rules for specific port 4502 . I also using IIS 7, will this make the different?

    ReplyDelete
  12. When the server starts. What is the first line printed? Listening on.. ?

    ReplyDelete
  13. It is listening at ws://csmvpc1-pc:4502/chat.

    ReplyDelete
  14. Have you tried using that absolute uri in the client application to open the socket?

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. I have not try absolute uri. If can, would you guild me how to do so? I new to this. When I run the wsdemo.html, it also show Socket Closed. Thx.

    ReplyDelete
  17. Copy the url from the console application and use it to replace the url used in the demo html page.

    ReplyDelete
  18. I did that before but it no working. I just wander how to test and make sure the ChatServer is working and hosting for the Client. Or need some other program or application? Thx

    ReplyDelete
  19. Jeff. I have another question... I just realise that there have wsdemo.html and wsdemo_nativewebsocket.html. wsdemo_nativewebsocket.html is working but not wsdemo.html can you tell why? thx.

    ReplyDelete
  20. Ah, there was only one version back in the day when I wrote this post. The non-native version uses Silverlight, is it installed? In which browser are you testing the native version?

    ReplyDelete
  21. I was testing on google chrome 15..
    Silverlight is install but not running.

    ReplyDelete
  22. How you connect the websocket with the WCF backend (chat service)? I just curious how the websocket work with the chat service. thx

    ReplyDelete
  23. The non-native version isn't working because Silverlight is not enabled.

    ReplyDelete
  24. Jef,

    does the native client work at all? Running on chrome 16.0.912.77. Silverlight version works fine.

    also, on the silverlight version is there anyway to get rid of the blue banner?

    ReplyDelete
    Replies
    1. Have you checked the protocol versions the client and server on running on?

      That blue banner is annoying indeed. I'm not sure, but maybe you can search the DOM for the correct (SL) object tag, and simply hide it?

      Delete
  25. Jef,

    Thx for the reply. I manage to get both working.

    Jon

    ReplyDelete
    Replies
    1. Nice! Care to share your solution to the second problem?

      Delete
  26. Hi Jef,
    I'm experiencing a problem in client app (as in web demo), in read callback I got a response

    HTTP/1.1 501 Not Implemented

    It seems the server refuses the messeges somehow.
    ChatTestClient outputs:

    --------------------
    Connecting to tomas-pc8 on 4502
    Client 004: Write 1 bytes: G
    Client 004: Write 3 bytes: ET
    Client 004: Write 5 bytes: /chat
    Client 004: Write 8 bytes: HTTP/1.
    Client 004: Write 1 bytes: 1
    Client 004: Write 1 bytes:
    Client 004: Write 1 bytes:

    Client 004: Write 20 bytes: Host: tomas-pc8:4502
    Client 004: Write 2 bytes:

    Client 004: Write 8 bytes: Upgrade:
    Client 004: Write 14 bytes: WebSocket

    Client 004: Write 21 bytes: connection: upgrade

    Client 004: Write 35 bytes: Origin: http://value:8080/foo/bar

    Client 004: Write 24 bytes: Sec-WebSocket-Draft: 3

    Client 004: Write 39 bytes: Sec-WebSocket-Nonce: A23F2BCA452DDE01

    Client 004: Write 1 bytes:
    Client 004: Write 1 bytes:

    Client 004: Read 122 bytes: HTTP/1.1 501 Not Implemented
    Connection: close
    Date: Sat, 03 Mar 2012 12:28:23 GMT
    Server: WcfHttpUpgradeServer/1.0


    Read exception: Unable to read data from the transport connection: An existing connection was forcibly closed by the remote host. - restarting
    --------------
    ChatService doesn't show anything's wrong

    Any idea what could be wrong?
    I've got pure install of new Win8 CP though, all set up as described above.

    Thanks,
    Tomas

    ReplyDelete
    Replies
    1. Strange, haven't heard that one before. I don't get how a GET can not be implemented.

      Sorry, I have no idea to be honest :-/

      Delete
    2. Even I am facing the same issue

      Delete
    3. Me too.

      Any help would be appreciate.

      Delete
  27. I have no words for this great post such a awe-some information i got gathered. Thanks to Author.
    html5 media player

    ReplyDelete