之前在koa2中一直使用websocket.鸯乃。后面看到很多 express使用socket.io造虎。遂在網(wǎng)上找了一堆資料扶供，搞懂了怎么在koa中使用socket.io匀哄。且socket與主服務(wù)端 app在同一端口油昂。
socket.io是對(duì)websocket的封裝讯屈，用于客戶端與服務(wù)端的相互通訊烛占。官網(wǎng):https://socket.io/砂缩。
不廢話，上代碼：
Server端：
const Koa = require('koa');
const app = new Koa();
const server = require('http').Server(app.callback());
const io = require('socket.io')(server);
const port = 8081;
server.listen(process.env.PORT || port, () => {
console.log(`app run at : http://127.0.0.1:${port}`);
})
io.on('connection', socket => {
console.log('初始化成功年柠！下面可以用socket綁定事件和觸發(fā)事件了');
socket.on('send', data => {
console.log('客戶端發(fā)送的內(nèi)容：', data);
socket.emit('getMsg', '我是返回的消息... ...');
})
setTimeout( () => {
socket.emit('getMsg', '我是初始化3s后的返回消息... ...')
}, 3000)
})
客戶端：注1
<html>
<head>
<meta charset='UTF-8'>
<title>socket.io客戶端</title>
<script src='/socket.io/socket.io.js'></script>
</head>
<body>
<button id='send'>發(fā)送消息到服務(wù)器</button>
<div>
<h3>服務(wù)器響應(yīng)的消息：</h3>
<i id='msg'></i>
</div>
<script>
var socket = io('ws://localhost:8081');
var send = document.querySelector('#send');
var msg = document.querySelector('#msg');
socket.on('getMsg', data => {
console.log('服務(wù)端消息：', data);
msg.innerHTML = `${data} <br/>`;
})
send.onClick = () => {
console.log('點(diǎn)擊了發(fā)送消息凿歼！');
socket.emit('send', 'hello');
}
<script>
</body>
</html>
注意：
<span id='notes-1'>注1：客戶端引用的'/socket.io/socket.io.js'；源于服務(wù)端運(yùn)行后會(huì)在根目錄動(dòng)態(tài)生成socket.io的客戶端js文件冗恨，客戶端可以通過(guò)固定路徑/socket.io/socket.io.js添加引用答憔。</span>
結(jié)束語(yǔ)
對(duì)你有幫助或喜歡的話，歡迎關(guān)注掀抹、打賞虐拓，收藏，謝謝傲武！
