{"id":1004,"date":"2013-11-14T09:44:59","date_gmt":"2013-11-14T09:44:59","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2013\/11\/14\/azure-web-site-now-supports-websockets\/"},"modified":"2022-08-09T03:10:00","modified_gmt":"2022-08-09T10:10:00","slug":"azure-web-site-now-supports-websockets","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/azure-web-site-now-supports-websockets\/","title":{"rendered":"Azure Web Site now supports WebSockets"},"content":{"rendered":"<p>If you missed the <a href=\"http:\/\/weblogs.asp.net\/scottgu\/archive\/2013\/11\/04\/windows-azure-import-export-hard-drives-vm-acls-web-sockets-remote-debugging-continuous-delivery-new-relic-billing-alerts-and-more.aspx\">announcement <\/a>the other day, WebSockets are now supported in Windows Azure Web Sites. <\/p>\n<p>Let&#8217;s try it with a sample SignalR application.<\/p>\n<p><strong>Create an Azure Web Site<\/strong><\/p>\n<ol>\n<li>Login to <a href=\"http:\/\/manage.windowsazure.com\/\">http:\/\/manage.windowsazure.com\/<\/a><\/li>\n<li>Select New, Compute, Web Site, Quick Create      \n<ul>\n<li>Type a URL and click Create Web Site<\/li>\n<\/ul>\n<p>     <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/11\/0456.image_thumb_64D2E696.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/11\/0456.image_thumb_64D2E696.png\" width=\"665\" height=\"284\" \/><\/a> <\/li>\n<li>Go to Dashboard of your new website, click Download the publish profile, and save *.PublishSettings file on your local hard drive      <br \/><img decoding=\"async\" title=\"clip_image001\" border=\"0\" alt=\"clip_image001\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/11\/3036.clip_image001_1920DC65.png\" width=\"550\" height=\"246\" \/> <\/li>\n<\/ol>\n<p><strong>Create a Visual Studio Project associated to an Azure Web Site<\/strong><\/p>\n<ol>\n<li>Install <a href=\"http:\/\/www.windowsazure.com\/en-us\/downloads\/\">Azure SDK<\/a> for Visual Studio 2013<\/li>\n<li>Open Visual Studio 2013<\/li>\n<li>On Menu: select File, New, Project, Visual C#, Web, ASP.NET Web Application      \n<ul>\n<li>On Name, type &quot;AzureWebSiteWithWebSockets&quot;, click OK<\/li>\n<li>Select Empty, click OK<\/li>\n<\/ul>\n<\/li>\n<li>In the Solution Explorer, right-click on your project and select Publish      <br \/><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/11\/4555.image_thumb_220C98B3.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/11\/4555.image_thumb_220C98B3.png\" width=\"541\" height=\"290\" \/><\/a>       \n<ul>\n<li>Click Import, select Import from a publish profile file, click Browse<\/li>\n<li>Find the *.PublishSettings file and click OK<\/li>\n<li>Click Validate Connection<\/li>\n<li>Click Publish<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><strong>Add SignalR Stock Ticker Sample<\/strong><\/p>\n<ol>\n<li>In the Solution Explorer, right-click on your project, select Manage NuGet Packages      \n<ul>\n<li>Select Online<\/li>\n<li>On search box, type Microsoft.AspNet.SignalR.Sample<\/li>\n<li>Click Install<\/li>\n<li>On License Acceptance window, click I Accept<\/li>\n<li>Click Close<\/li>\n<\/ul>\n<\/li>\n<li>In the Solution Explorer, right-click on your project, select Add, New Item      \n<ul>\n<li>Select Web, OWIN Startup class<\/li>\n<li>On Name, type &quot;Startup.cs&quot;<\/li>\n<li>Click Add<\/li>\n<\/ul>\n<\/li>\n<li>On Startup.cs file, add this line of code inside method      <br \/>&quot;public void Configuration(IAppBuilder app)&quot;       \n<p><code>Microsoft.AspNet.SignalR.StockTicker.Startup.ConfigureSignalR(app);<\/code><\/p>\n<\/li>\n<li>On SignalR.Sample\/SignalR.StockTicker.js file, add this line of code before &quot;$.connection.hub.start()&quot;      \n<p><code>$.connection.hub.logging = true;<\/code><\/p>\n<\/li>\n<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <\/p>\n<li>In the Solution Explorer, right-click SignalR.Sample\/StockTicker.html and select View in Browser      <br \/><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/11\/7711.image_thumb_0FC3D1F1.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/11\/7711.image_thumb_0FC3D1F1.png\" width=\"565\" height=\"508\" \/><\/a><\/li>\n<li>Click Open Market. You should see animations on the table.      <br \/><img decoding=\"async\" title=\"clip_image002\" border=\"0\" alt=\"clip_image002\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/11\/1882.clip_image002_1BC99816.png\" width=\"591\" height=\"377\" \/> <\/li>\n<\/ol>\n<p><strong>Publish your local changes to Azure Web Site<\/strong><\/p>\n<ol>\n<li>Right click project, select Publish      \n<ul>\n<li>Click Publish<\/li>\n<\/ul>\n<\/li>\n<li>On Browser, open <a href=\"http:\/\/[YourWebSite].azurewebsites.net\/SignalR.Sample\/StockTicker.html\">http:\/\/[YourWebSite].azurewebsites.net\/SignalR.Sample\/StockTicker.html<\/a><\/li>\n<li>Click F12 to open the Web Developer Console<\/li>\n<li>Refresh page<\/li>\n<li>Your browser does not connect using websockets. It connects with another transport like Server Sent Events, Forever Frame, or Long Polling.      <br \/><img decoding=\"async\" title=\"clip_image003\" border=\"0\" alt=\"clip_image003\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/11\/1351.clip_image003_0796AF05.png\" width=\"800\" height=\"559\" \/> <\/li>\n<\/ol>\n<p><strong>Enable WebSocket on Azure Web Site<\/strong><\/p>\n<ol>\n<li>On Azure Portal, select Web Sites, select your Web Site, select Configure<\/li>\n<li>Find Web Sockets and turn it on      <br \/><img decoding=\"async\" title=\"clip_image004\" border=\"0\" alt=\"clip_image004\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/11\/2061.clip_image004_2DA62BE3.png\" width=\"345\" height=\"56\" \/> <\/li>\n<li>Click Save <\/li>\n<li>On Browser, open <a href=\"http:\/\/[YourWebSite].azurewebsites.net\/SignalR.Sample\/StockTicker.html\">http:\/\/[YourWebSite].azurewebsites.net\/SignalR.Sample\/StockTicker.html<\/a><\/li>\n<li>Click F12 to open the Web Developer Console<\/li>\n<li>Refresh page<\/li>\n<li>Your browser now connects using websockets!      <br \/><img decoding=\"async\" title=\"clip_image005\" border=\"0\" alt=\"clip_image005\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/11\/2821.clip_image005_528A1FD4.png\" width=\"805\" height=\"545\" \/>&#160;<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>If you missed the announcement the other day, WebSockets are now supported in Windows Azure Web Sites. Let&#8217;s try it with a sample SignalR application. Create an Azure Web Site Login to http:\/\/manage.windowsazure.com\/ Select New, Compute, Web Site, Quick Create Type a URL and click Create Web Site Go to Dashboard of your new website, [&hellip;]<\/p>\n","protected":false},"author":402,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[7408,7455],"class_list":["post-1004","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-signalr","tag-websockets"],"acf":[],"blog_post_summary":"<p>If you missed the announcement the other day, WebSockets are now supported in Windows Azure Web Sites. Let&#8217;s try it with a sample SignalR application. Create an Azure Web Site Login to http:\/\/manage.windowsazure.com\/ Select New, Compute, Web Site, Quick Create Type a URL and click Create Web Site Go to Dashboard of your new website, [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/1004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/402"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=1004"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/1004\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=1004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=1004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=1004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}