在 Koa2 中使用 Socket.io 实现实时聊天应用程序-JavaScript中文网-JavaScript教程资源分享门户

简介

Koa2 是 Node.js 中比较流行的 Web 框架，而 Socket.io 是实现实时双向通讯的 JavaScript 库。这篇文章将介绍如何在 Koa2 中使用 Socket.io 实现实时聊天应用程序。

安装

首先需要安装 Koa2 和 Socket.io：

npm install koa@2.x.x
npm install socket.io@2.x.x

实现

创建一个 Koa2 服务器

const Koa = require('koa')
const app = new Koa()

app.listen(3000, () => {
  console.log('Koa2 server is listening on port 3000')
})

集成 Socket.io

const http = require('http')
const server = http.createServer(app.callback())
const io = require('socket.io')(server)

io.on('connection', socket => {
  console.log('a user connected')
  socket.on('disconnect', () => {
    console.log('user disconnected')
  })
})

通过上述代码，我们已经启动并在服务器上集成了 Socket.io。

实现聊天室功能

在 Socket.io 的基础上，可以很容易地实现聊天室功能。

io.on('connection', socket => {
  console.log('a user connected')

  socket.on('disconnect', () => {
    console.log('user disconnected')
  })

  socket.on('chat message', msg => {
    console.log(`message: ${msg}`)
    io.emit('chat message', msg)
  })
})

接收到来自客户端的 chat message 事件后，服务端会把消息转发给所有的客户端。

实现前端

在前端页面，通过 Socket.io 将消息发送到服务端并接收服务端广播的消息。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Socket.IO chat</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font: 13px Helvetica, Arial;
      }

      form {
        display: flex;
        margin-top: 10px;
      }

      form input {
        flex: 1;
        border-radius: 3px 0 0 3px;
        border: none;
        padding: 7px;
      }

      form button {
        border-radius: 0 3px 3px 0;
        border: none;
        background-color: #4caf50;
        padding: 7px;
        color: #fff;
        cursor: pointer;
      }

      ul {
        list-style: none;
        margin: 10px 0;
        overflow-y: scroll;
        height: 200px;
        padding-left: 0;
      }

      ul li {
        padding: 5px 10px;
      }

      ul li:nth-child(odd) {
        background-color: #f1f1f1;
      }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="message-input" autocomplete="off" />
      <button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io()

      const form = document.querySelector('form')
      const input = document.querySelector('#message-input')
      const messages = document.querySelector('#messages')

      form.addEventListener('submit', e => {
        e.preventDefault()
        if (input.value) {
          socket.emit('chat message', input.value)
          input.value = ''
        }
      })

      socket.on('chat message', msg => {
        const li = document.createElement('li')
        li.textContent = msg
        messages.appendChild(li)
        messages.scrollTop = messages.scrollHeight
      })
    </script>
  </body>
</html>

总结

通过以上的实现，我们已经成功地在 Koa2 中使用 Socket.io 实现了实时聊天应用程序。这个例子可以拓展成更复杂和实际的应用，其中包含了 Koa2 和 Socket.io 的基本使用和配合使用，也有一些前端事件的处理。希望本篇文章能够对大家了解实时通讯技术有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a092e3add4f0e0ff8d8403

在 Koa2 中使用 Socket.io 实现实时聊天应用程序

简介

安装

实现

总结

纠错反馈