持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第25天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章react项目常用知识点中，我们学习了react项目中常用的知识点，包括项目搭建、使用CSS预编译器 - SASS、配置基础路由等相关知识点。今天，在这篇文章中，我们将学习WebSocket的知识点，包括什么是WebSocket、socket.io 的使用等相关知识点。
WebSocket介绍
WebSocket 是一种数据通信协议，类似于我们常见的 http 协议。我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处呢？HTTP 协议有一个缺陷：通信只能由客户端（浏览器、手机等）发起。
举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。因此，有没有更好的方法呢？这就有了 WebSocket。
WebSocket API 是一种先进的技术，它可以在用户的浏览器和服务器之间打开一个双向的交互式通信会话，最典型的场景就是聊天室。使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。Ajax 轮询是通过定时器，每隔一段时候发出一个询问，了解服务器有没有新的信息。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。
WebSocket 协议在2008年诞生，2011年成为国际标准，所有浏览器都已经支持了。它的最大特点就是：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
socket.io 的使用
原生的 WebSocket 使用比较麻烦，实际开发中推荐使用第三方库 socket.io。该库既提供了客户端的包又提供了服务端的包：
- 客户端的包为：socket.io-client（前端使用该包，io 是 Input 和 Output 的简称）
- 服务端的包为：socket.io
常用 API：
import { io } from 'socket.io-client'
// 建立连接
const socketio = io(url, options) // 等同于 原生websocket new WebSocket()
// 链接成功时，就会执行此处的回调函数
socketio.on('connect', () => {
})
// 接收服务器响应的消息
socketio.on(eventName, data => {})
// 发消息给服务器
socketio.emit(eventName, 数据)
// 关闭链接
socketio.close()
