Find file
Fetching contributors…
Cannot retrieve contributors at this time
81 lines (69 sloc) 3.26 KB
Lecture 10 - CSC 210 Fall 2015
Philip Guo
This example was adapted from
(Comments added by Philip Guo)
This HTML file and enclosing JavaScript code runs in the user's Web browser.
In other words, it is client-side code. This must first be loaded from the
server (just like all files do), but once it's in the user's Web browser,
it runs purely in the browser.
<!doctype html>
<title>Socket.IO chat</title>
<!-- standard CSS stuff, you can ignore this -->
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
<!-- a list of chat messages, which starts out empty -->
<ul id="messages"></ul>
<form action="">
<!-- an input text box where the user types in chat messages,
followed by the "Send" button -->
<input id="m" autocomplete="off" /><button>Send</button>
<!-- include the client (in-browser) library as well as the usual
jQuery library. (note that these are being loaded from other servers,
but you could've downloaded them beforehand yourself too.) -->
<script src=""></script>
<script src=""></script>
// Create a new object in the browser. By default, this
// creates a new WebSocket and connects to the corresponding
// object created on the server in index.js (in the 'io' variable there).
// If you wanted to connect to a different server than index.js on
// localhost:3000, then pass its URL as a parameter to io().
var socket = io();
// when the user submits the form by either pressing Enter in the
// input text box (with id "m") or clicking the Send button (buttons
// in HTML forms default to submitting them, weird!), run this function:
// grab the current value of string in the "m" input text box
// and send (emit) it to the server as a 'chat message' object.
// the server will then take it and emit it to all
// currently-connected browsers (including yourself)
socket.emit('chat message', $('#m').val());
// clear the "m" input text box to prepare for your next chat
return false; // return false so that the form doesn't reload the page
// this function runs when the server successfully sends (emits) a
// message of type 'chat message' to this browser
socket.on('chat message', function(msg){
// append the message msg that you just received to the
// "#messages" <ul> list by creating a new <li> list item