前端开发中经常使用到 socket 进行实时通讯，而使用 Hapi 框架与 SocketIO 结合使用也很常见。但在使用中可能会遇到跨域问题。本文将介绍 Hapi 框架在使用 SocketIO 时出现的跨域问题及其解决方案。
跨域问题
当不同源（如 http://localhost:3000 和 http://localhost:9000）之间的 web 应用程序试图在客户端通过使用 XMLHttpRequest 中的脚本接口进行通信时，浏览器的同源策略将阻止这种访问。跨域资源共享（CORS）机制是一种可编程的方式，通过将访问的限制设置在 web 服务器上，支持跨域请求。
在使用 Hapi 框架与 SocketIO 结合使用时，会出现跨域问题，导致 socket 通讯无法正常进行。
解决方案
在 Hapi 框架中，可以通过 hapi-cors 处理跨域问题。hapi-cors 是 Hapi 插件之一，用于支持跨域请求。以下是解决方案的具体步骤：
安装 hapi-cors 插件
在终端中使用 npm 安装 hapi-cors 插件：
npm install hapi-cors
配置 Hapi 服务器
在配置 Hapi 服务器时，需要在注册插件时添加 hapi-cors：
-- -------------------- ---- -------
----- ---- - ----------------------
----- -- - -----------------------------
----- -------- - ---------------------
-- -- ---- ---
----- ------ - --- -------------
----- -----
----- -----------
---
-- -- --------- --
----- -----------------
------- ---------
-------- -
-------- ------
-------- ------- ------- ------ --------- ----------
-
---以上代码中，使用 HapiCors 插件注册并设置允许跨域请求。其中，options 的 origins 属性为允许访问的地址，方法为允许的 HTTP 请求方法。
编写 SocketIO 服务端代码
在使用 socket.io 进行实时通讯时，需要在 Hapi 服务器中添加如下代码：
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});编写 SocketIO 客户端代码
在前端使用 socket.io 客户端时，需要在 html 中引入 socket.io 库并连接 socket 服务器，代码如下：
-- -------------------- ---- -------
------- ------------------------------------------------------------
--------
----- ------ - ----------------------------
-------------------- -- -- -
-------------------------
---
------------------ ------ -- -
------------------
---
----------------------- -- -- -
----------------------------
---
---------将以上代码添加至 html 文件中，可以在前端页面中创建 socket 与服务器进行通讯。
总结
通过本文，你已经了解了 Hapi 框架在使用 SocketIO 时出现的跨域问题以及解决方案。在进行实时通讯时，我们可以使用 Hapi 和 SocketIO 结合使用。需要注意的是，当使用 socket.io 时，需要使用 socket.io-client 库进行连接。同时，要通过 hapi-cors 插件处理跨域问题，在 Hapi 服务器配置时添加 hapi-cors 插件并设置以下参数即可解决跨域问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c15d748841e9894a64172