之前在koa2中一直使用websocket.。后面看到很多 express使用socket.io。遂在网上找了一堆资料，搞懂了怎么在koa中使用socket.io。且socket与主服务端 app在同一端口。
socket.io是对websocket的封装，用于客户端与服务端的相互通讯。官网: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绑定事件和触发事件了');
socket.on('send', data => {
console.log('客户端发送的内容：', 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'>发送消息到服务器</button>
<div>
<h3>服务器响应的消息：</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('服务端消息：', data);
msg.innerHTML = `${data} <br/>`;
})
send.onClick = () => {
console.log('点击了发送消息！');
socket.emit('send', 'hello');
}
<script>
</body>
</html>
注意：
<span id='notes-1'>注1：客户端引用的'/socket.io/socket.io.js'；源于服务端运行后会在根目录动态生成socket.io的客户端js文件，客户端可以通过固定路径/socket.io/socket.io.js添加引用。</span>
结束语
对你有帮助或喜欢的话，欢迎关注、打赏，收藏，谢谢！
网友评论