koa2使用socket.io

作者: 好了伤疤忘了痛_伪全栈 | 来源:发表于2018-05-30 10:52 被阅读0次

之前在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>

结束语

对你有帮助或喜欢的话,欢迎关注、打赏,收藏,谢谢!

相关文章

网友评论

    本文标题:koa2使用socket.io

    本文链接:https://www.haomeiwen.com/subject/uurtsftx.html