HTML and CSS Reference
In-Depth Information
In the next dialog box, select the basic template and make sure the razor view
engine is selected. Click the ok button and the project will be created.
right-click the Controller folder in the Solution Explorer and select the
Add ➤ Controller link. Enter the name HomeController and select the Empty MVC
Controller template. Click the Add button to create the controller.
right-click the View folder and select the Add ➤ New Folder links. Enter the name
Home .
right-click the new Home folder and select the Add ➤ View links. In the Add View
dialog box, enter the name Index , make sure the razor view engine is selected,
unselect all the check boxes, and click the Add button.
In the Index.cshtml file, modify the body element by adding the following markup
shown in bold:
<body onload="connect();" >
<pre id="output"></pre>
<input type="text" id="input" value="" />
<input type="submit" id="sendMsg" value="Send Message"
onclick="send();" />
This creates a pre element that will be used to display messages that are received
as well as other debugging messages. This also defines a text box for entering the
message text and a button to send it. The onload event will call the connect()
function that you will implement next.
Now you're ready to implement the JavaScript that will communicate with your
websocket server. The browser takes care of the protocol and frame manipulation so
the client side is pretty easy. Add the script element shown in Listing 13-7 to the
head element:
Listing 13-7. The client side JavaScript
<script type="text/javascript">
var ws; // This is our socket
function connect() {
output("Connecting to host...");
try {
ws=new WebSocket("ws://localhost:8300/chat");
} catch (e) {
Search WWH ::

Custom Search