Web Sockets 和 Socket.IO 的可爱介绍✨

什么是 Web Socket

参考

这是一个技能培养项目，旨在帮助大家理解 Web Sockets 的基础知识，以及使用 Express 实现 Socket.IO 的功能。我的目标是将 Web Sockets 集成到一个新的全栈项目中，并巩固 Web Sockets 的使用经验，以便将来为 Discord.js 和 SocketIO 等开源项目做出贡献。

设计灵感来自Angela He 。项目源代码可在此处找到。

工具：

• HTML——超文本标记语言。
• SCSS——一个简化样式的 CSS 预处理器。
• JavaScript - 用于服务器端代码和网页事件
• jQuery——一个简化 HTML DOM 操作的 JavaScript 库。
• Express - 用于构建应用服务器的 JavaScript 框架。
• Node - 用于在浏览器之外编写的 JavaScript 代码的 JavaScript 运行时环境。
• Socket.io - 用于实时服务器客户端/通信的 JavaScript Web 套接字框架。

什么是 Web Socket

Web 套接字是一种双向协议，可以帮助我们与客户端和服务器实时通信！

想象一下 Slack 或 Discord 中的群聊。当你向同事发送关于即将到来的截止日期的消息时，或者在视频游戏中对未完成目标的队友进行语音聊天时，群聊中的每个人都会在你发送消息后立即收到该消息。

为什么要使用 Web Socket？

Web Socket 是基于 HTTP 发送/接收范式设计的。由于 Web Socket 是实时的，并且类似于点对点 (P2P)，我们无需等待任何一端的响应，也无需处理 HTTP 请求带来的开销，例如打开新连接、关闭连接，以及在几秒或几分钟内频繁向服务器发送更新请求（即轮询）。如果我们想要快速响应，轮询就没什么用了。

然而，Web Socket 对于这种类型的通信来说更加灵活可靠。我们不需要为了查看是否有新数据而频繁地重复发送 GET 请求。连接保持打开状态，客户端和服务器之间可以随时发送数据。

在某些情况下，HTTP 可能是最佳选择。原因之一是所有 Web 浏览器都支持它。对于拥有大量连接用户的应用来说，HTTP 也更适合，因为服务器无需维持大量的开放连接。

Web 套接字的另一种替代方案是服务器发送事件(SSE)。这会在客户端和服务器之间建立单向连接——只有服务器需要将数据推送到客户端。

Socket.io

SocketIO 是一个用于构建 Web 套接字应用的 JavaScript 框架。以下是客户端和服务器之间相互发送数据的两个代码片段。

服务器代码

在中server.js，我们建立3个事件监听器：

• 连接事件
  • 一位客户进入了聊天
• 断开连接事件
  • 客户退出聊天
• 聊天消息事件
  • 客户发来消息

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

io.on('connection', socket => {
  console.log('A new user connected! ✨')

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

  // Listens for the client chat event
  socket.on('chat message', msg => {
    // send the message out to everyone
    io.emit('chat message', msg)
  })
})

我们调用了一个名为 的附加方法emit()。这就是我们将事件从服务器发送到客户端，以及从客户端发送到服务器的方法。在 中server.js，每当它收到来自客户端的新消息时，就会向客户端emit()发送一个事件。'chat message'

客户端代码

在中index.html，我们还有一个事件监听器和事件发射器：

  <script>
    const socket = io()
    const chatBubbleDiv = '<div class="bubble"></div>'
    $('form').submit(e => {
      // prevent page refresh 
      e.preventDefault()

      // send chat event to the server
      socket.emit('chat message', $('#message').val())

      // clear the message in the form
      $('#message').val('')
      return false
    })

    // display sent message to all clients
    socket.on('chat message', msg => {
        $('#messages').append($(chatBubbleDiv).text(msg))
    })
  </script>

事件发射器会在用户发送消息时通知服务器。然后，当服务器将事件发送'chat message'回客户端时，它会向所有连接的用户显示该消息。

Web Socket 可以很好地促进各种项目的数据流！这是一个有趣的技能培养项目，我很期待将其应用到未来的项目中。欢迎在下方留言，分享您的想法或评论。感谢您的阅读！

参考

• Socket.IO 文档：https://socket.io/
• 服务器发送事件：https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events