前言
众所周知，现代的 Web 应用离不开实时通信的支持。而作为前端开发者，我们经常需要实现实时评论、实时消息推送等等功能。这时，Socket.io 就成为了我们的利器。
本篇文章将介绍 Socket.io 的基本使用方法，并以一个实时评论的案例来演示 Socket.io 如何在 Web 应用中实现实时评论功能。
Socket.io 简介
Socket.io 是一个基于 Node.js 的实时通信框架，能够在客户端和服务器之间建立 websocket 连接，实现实时通信。Socket.io 支持跨浏览器、跨平台，而且使用起来十分简单，广受前端工程师的欢迎。
基本用法
安装
在使用 Socket.io 之前，我们需要用 npm 安装。在终端中运行以下命令即可：
npm install socket.io
服务器端实现
在 Node.js 中，我们可以建立一个 websocket 服务器。代码如下：
const app = require('http').createServer()
const io = require('socket.io')(app)
io.on('connection', socket => {
console.log('a user connected')
})
app.listen(3000, () => console.log('listening on port 3000'))代码中，我们先创建了一个 http 服务器，然后用 socket.io 将其包装成 websocket 服务器。在有客户端连接时，会触发 'connection' 事件，从而打印一条连接成功的日志。
客户端实现
接下来，我们建立一个客户端文件，在其中连接到 websocket 服务器。
<script src="https://cdn.socket.io/socket.io-3.1.0.min.js"></script>
<script>
const socket = io('http://localhost:3000');
</script>这里我们使用了 Socket.io 的 CDN，方便快捷。
案例：实现实时评论功能
下面，我们就用一个实时评论的案例来演示 Socket.io 如何在 Web 应用中实现实时评论功能。
HTML 结构
我们的 HTML 结构是一个评论列表：
-- -------------------- ---- -------
-----
--- -----------------
--------------
--------------
--------------
-----
------ ----------- ----------------- --
------- --------------------------------
------客户端实现
首先，我们需要在客户端中连接到之前的 websocket 服务器，并发送一条消息：
const socket = io('http://localhost:3000')
socket.on('connect', () => {
socket.emit('newComment', '欢迎来到评论区')
})这里，我们监听了 'connect' 事件，表示客户端连接成功时发送一条信息。
接着，监听 'newComment' 事件，当服务器广播一条新的评论时，将评论添加到列表中：
const commentList = document.getElementById('commentList')
socket.on('newComment', comment => {
const newComment = document.createElement('li')
newComment.innerText = comment
commentList.appendChild(newComment)
})最后，增加一个事件监听器，在用户提交评论时向服务器发送一条消息：
const submitComment = document.getElementById('submitComment')
const commentInput = document.getElementById('commentInput')
submitComment.addEventListener('click', () => {
const comment = commentInput.value
socket.emit('newComment', comment)
commentInput.value = ""
})至此，一个简单的实时评论应用就完成了。
总结
Socket.io 是一个简单易用的实时通信框架，在 Web 应用中被广泛使用。本文介绍了 Socket.io 的基本使用方法，并以实时评论的案例演示了 Socket.io 在 Web 应用中实现实时功能的威力。希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6474af53968c7c53b01fcdf3