在前端开发中，socket.io 模块是一种非常常用的实时通信工具。在本篇文章中，我们将会介绍如何使用 socket.io 模块实现实时通信，并附上详细的示例代码。
socket.io 简介
socket.io 是一个基于 HTML5 WebSocket 的实时消息传输库，其最重要的特点就是实时性。在传统的前后端通信方式中，前端需要手动去轮询后端接口来获取最新数据，这种方式十分耗费资源，且不利于实时性。而使用 socket.io，则可以实现服务器主动向客户端发送消息，客户端也可以向服务器发送消息。
socket.io 模块除了支持 WebSocket 连接外，还支持基于 AJAX 长轮询、JSONP等方式进行消息传输，因此能够适应多种网络环境。
socket.io 的使用
在使用 socket.io 之前，需要先安装依赖。
npm install socket.io --save
安装完成后，在前端页面引入 socket.io 依赖。
<script src="/socket.io/socket.io.js"></script>
接下来，在服务器端引入 socket.io 并监听客户端连接请求。
const app = require('express')(); const http = require('http').createServer(app); const io = require('socket.io')(http); io.on('connection', (socket) => { console.log('a user connected'); });
在客户端页面中，使用 io() 方法建立与服务器的连接。
const socket = io();
至此，客户端与服务器之间就可以通过 socket.emit() 方法进行消息的发送和接收了。
-- -------------------- ---- ------- -- ------- ---------------------- ------ -------- -- ------- ------------------- -------- -- - -------------------- ----- -- - --------------------- - - ----- --- ---展开代码
除了 emit() 方法外，socket.io 还支持如下多种方法进行消息发送:
broadcast.emit()：向除发送者以外的所有客户端发送消息io.emit()：向所有客户端发送消息socket.to(room).emit()：向指定房间内的客户端发送消息
使用方法与 emit() 类似，这里不再一一赘述。
示例代码
服务器端
-- -------------------- ---- ------- ----- --- - --------------------- ----- ---- - ---------------------------------- ----- -- - --------------------------- ------------ ----- ---- -- - ---------------------- - --------------- --- ------------------- -------- -- - -------------- ---- ------------ ----------------------- -- -- - ----------------- --------------- --- --------------- --------- ----- -- - ------------- --------- ----- --- --- ----------------- -- -- - ---------------------- -- --------- ---展开代码
客户端
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- ------------ ------- ------ --- ------------------- ----- --------- ---------- ------ ---------- ------------------ -- --------------------- ------- ------- --------------------------------------- -------- ----- ------ - ----- ----- ---- - -------------------------------- ----- ----- - --------------------------------- ----- -------- - ------------------------------------ ------------------------------- --- -- - ------------------- ----------------- --------- ------------- ----------- - --- --- --------------- --------- ----- -- - ----- -- - ----------------------------- -------------- - ---- ------------------------- --- --------- ------- -------展开代码
这是一个最简单的示例，当客户端向服务器发送消息时，服务器会将消息广播给所有连接的客户端。你可以对此进行修改，添加房间、私聊等功能，自由发挥。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c937cde46428fe9e053deb
