node.js+socket.io Demo
node-socket.io_demo.png
init
np init -y
npm i express socket.io body-parser -S -D
npm start
目錄結(jié)構(gòu)
- node_modules
- public
- css
- style.css
- js
- index.js
- vue.js
- css
- views
- index.html
- app.js
- package.json
配置服務(wù) app.js
const http = require("http"); //引入http模塊
const fs = require("fs"); //引入fs模塊
const path = require("path"); //引入path模塊
const express = require('express'); //引入express模塊
const app = express();
const server = require('http').createServer(app); //開(kāi)啟服務(wù)
const io = require('socket.io')(server); //引入socket.io
.... // 配置路由 下面講到
.... // 這里寫(xiě)socket.io 下面會(huì)講到
const port = 3000; //端口號(hào)
server.listen(port, err => {
console.log(err ? 'Server Error' : `http://localhost:${port}`); //開(kāi)啟服務(wù)
});
路由配置
//讀取文件的方法
const readFile = (filePath) => {
return new Promise((resolve, reject) => {
fs.readFile(path.join(__dirname, filePath), 'utf-8', (err, data) => {
err ? reject(err) : resolve(data);
})
})
}
app.use(express.static(path.join(__dirname, '/'))); //開(kāi)啟公共路徑
//配置根路徑
app.get('/', (req, res) => {
readFile('./views/index.html').then(data => {
res.send(data);
})
});
//配置404
app.use((req, res, next) => {
res.send("<h1>頁(yè)面找不到了!<a href='/'>點(diǎn)我</a>回家!</h1>")
})
主角 socket.io (服務(wù)端)
//用戶(hù)連接觸發(fā)事件
io.on('connection', socket => {
console.log("用戶(hù)連接", socket.request.headers.cookie); //打印出連接用戶(hù)id
})
//用戶(hù)向服務(wù)器發(fā)送數(shù)據(jù)
socket.on('hi', data => {
console.log(`用戶(hù)發(fā)送:${data}`); //輸出用戶(hù)發(fā)送過(guò)來(lái)的內(nèi)容
})
//服務(wù)器向用戶(hù)發(fā)送數(shù)據(jù)
socket.emit('back_hi', `服務(wù)器:${Date.now()}!`);
//服務(wù)器向所有用戶(hù)發(fā)送數(shù)據(jù)
socket.broadcast.emit('back_hi', data);
//用戶(hù)斷開(kāi)連接發(fā)送數(shù)據(jù)
socket.on('disconnect', data => {
console.log('斷開(kāi)', data)
})
index.html (客戶(hù)端)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./socket.io/socket.io.js"></script>
<title>node_demo</title>
</head>
<body></body>
<script src="./public/js/index.js "></script>
</html>
index.js
socket = io.connect(); //創(chuàng)建連接
ocket.emit('hi', '你好'); //發(fā)送數(shù)據(jù)
//收到服務(wù)器返回的事件
socket.on('back_hi', msg => {
console.log(msg)
})
完成通訊
注意事項(xiàng)
- 配置app.js 的順序不要錯(cuò)
- 一定要開(kāi)啟公共路徑
- 配置根路徑一定要讀取文件發(fā)送客戶(hù)端響應(yīng)
