HTML and CSS Reference
In-Depth Information
3.
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.
4.
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.
5.
right-click the View folder and select the Add ➤ New Folder links. Enter the name
Home
.
6.
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.
7.
In the
Index.cshtml
file, modify the body element by adding the following markup
shown in bold:
<body
onload="connect();"
>
<div>
<pre id="output"></pre>
<input type="text" id="input" value="" />
<input type="submit" id="sendMsg" value="Send Message"
onclick="send();" />
</div>
</body>
8.
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.
9.
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) {
output(e);
}
