在前端开发中，有许多场景需要与服务器建立实时的双向通信，这时候就需要使用到 WebScokets 技术。Node.js 中有一个socket.io库可以用来实现 WebSocket, 但在前端浏览器中需要使用用到 socket.io-client 库。不过，如果你不希望直接操作 socket.io 这样的复杂的 WebSocket 库，在这里我推荐使用一个简单易用的 npm 包 - socket-promise，本篇文章主要介绍它的使用教程及一些注意点。
安装
首先你需要安装 Node.js 和 npm 环境，这里不再赘述。接着，我们可以进行如下命令来安装 socket-promise：
npm install socket-promise
引入
在前端代码中，最好使用 ECMAScript 6 的方式来引入 socket-promise，引入语句如下：
import socketPromise from 'socket-promise'
使用
socket-promise 是一个 Promise 封装的 WebSocket 库，使用方法与普通的 Promise 一样，例如：
-- -------------------- ---- -------
----- ------ - ------------------------------------
------------------ ----- -- -
---------------------- ------ -- ----
--
------------------ --------
-------- -- -
-------------------- ---- ---------------
--
------------ -- -
------------------ ------- ---- ------- -------- -- ----
--详细说明
创建 Socket 实例
使用 socket-promise 来建立连接最简单的方式就是给定一个 URL 字符串。此 URL 可以是一个字符串包含一些基本 WebSocket 配置和协议参数，例如：
const socket = socketPromise('ws://localhost:8080')事件监听
我们可以使用 on() 方法来监听事件，接收从 WebSocket 服务端发来的消息。你可以监听在 message 事件上收到的消息，也可以在 error 事件上处理错误。另外，socket-promise 还支持其他的事件，例如：open, close, ping, pong, unexpected-response
-- -------------------- ---- ------- ----- ------ - ------------------------------------ -------------------- ------ -- - --------------------- - -------- --------- -- ------------------ ----- -- - ---------------------- ------ -- ---- --
发送消息
你可以使用 send() 方法来向 WebSocket 服务器发送消息。如果想要调用此方法，你需要先使用 open() 方法来打开和服务器的连接。
const socket = socketPromise('ws://localhost:8080')
socket.open().then(() => {
socket.send('Hello World!')
})关闭 Socket 连接
我们可以通过调用 close() 方法来关闭包裹在 Promise 中的 WebSocket 实例。但是，如果关闭操作出现异常，则 Promise 将会 reject。你可以使用 finally() 来做一些额外的处理，例如：从内存或者 DOM 中删除 Socket 实例。
-- -------------------- ---- -------
----- ------ - ------------------------------------
------------------ --------
-------- -- -
-------------------- ---- ---------------
--
----------- -- -
--------------
--其他的方法
除了上述提到的方法，socket-promise 还支持其他，并且更全面的方法。例如：state(), open(), ping(), pong(), reset()
总结
在本篇文章中，我们介绍了 npm 包 - socket-promise 的使用方法和一些注意事项。虽然socket-promise 是一个轻量级的实现，并且适用于基本的 WebSocket 通信，但是，之后你可能需要更加强大或定制化的库来满足你的需求。总之，socket-promise 适合在小项目或小场景下使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbb81e8991b448e62cf