We need to add two CSS rules to style.css
, present in static/css/
. Append the following to the file:
.chat-message {padding: 5px; margin: 5px 0;} .chat-list {max-height: 500px; overflow: auto;}
These just make the chat page look better.
We will now need to add our bower_components
directory to be served in Express. Open up app.js
and add the following line after the current static line:
app.use(express.static(__dirname + '/static'));
app.use(express.static(__dirname + '/bower_components'));
When there are multiple references to static, Express will go through each directory in order to find the file.
Next, we need to add all our new JavaScript files to the layout and chat page. First, open layout.ejs
, present in the views/
folder, and make sure the following list of JavaScript files is in the head:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script> <script type="text/javascript" src="/jquery...