Search…
1-3 服务HTML(Serving HTML)
到目前为止,在 index.js 中我们调用了 res.end并传递一个HTML字符串。如果我们将整个应用程序的HTML放在那里,我们代码看起来会很混乱,相反,我们将创建一个index.html文件并提供服务。
让我们重构下,使用sendFile替换下路由处理程序:
1
app.get('/',(req,res)=>{
2
res.sendFile(__dirname+'/index.html')
3
})
Copied!
index.html补充下内容,如下:
1
<!doctype html>
2
<html>
3
<head>
4
<title>Socket.IO chat</title>
5
<style>
6
* { margin: 0; padding: 0; box-sizing: border-box; }
7
body { font: 13px Helvetica, Arial; }
8
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
9
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
10
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
11
#messages { list-style-type: none; margin: 0; padding: 0; }
12
#messages li { padding: 5px 10px; }
13
#messages li:nth-child(odd) { background: #eee; }
14
</style>
15
</head>
16
<body>
17
<ul id="messages"></ul>
18
<form action="">
19
<input id="m" autocomplete="off" /><button>Send</button>
20
</form>
21
</body>
22
</html>
Copied!
如果你重启下(ctrl+c 关闭node服务,然后再次运行node index.js)进程和刷新页面,你应该看到如下:
Copy link