使用原生vanilla JS能否接收HTTP请求？如何实现？

核心结论 #

常规运行在浏览器环境中的原生JavaScript（Vanilla JS）和jQuery都无法直接监听、接收外部主动发起的HTTP请求。 #

原因说明

浏览器端的JavaScript运行在沙箱安全模型下，没有权限监听系统TCP端口，自然也无法像后端服务一样接收外部发来的HTTP请求。我们常用的fetch、XMLHttpRequest这类API都只能由客户端主动向服务端发起请求，属于「拉取」逻辑，没有被动接收请求的能力。
jQuery本质是对浏览器原生API的封装，原生能力边界就是jQuery的能力边界，因此jQuery也做不到直接接收HTTP请求。 #

可实现类似需求的替代方案

如果你的场景是需要获取服务端主动推送的内容，可以用以下成熟方案：

• 短轮询：客户端定时通过fetch/XMLHttpRequest向服务端发起请求，查询是否有新数据，逻辑最简单兼容性最好，jQuery的$.ajax也可以直接实现该逻辑。
• 长轮询：客户端发起请求后，服务端不立即返回，而是等到有新数据或者连接超时才返回结果，客户端拿到结果后立刻发起下一次请求，相比短轮询可以大幅减少无效请求数量，同样用常规请求API即可实现。
• Server-Sent Events（SSE）：原生JS提供EventSource接口，支持和服务端建立单向长连接，服务端可以随时向客户端推送数据流，非常适合只需要服务端单向推送的场景，不需要额外引入依赖。
• WebSocket：原生JS提供WebSocket接口，和服务端建立全双工通信连接后，两端都可以随时向对方发送数据，适合需要双向实时交互的场景。

特殊场景说明

如果你的JavaScript运行在Node.js（服务端）环境下，是可以直接接收HTTP请求的，调用Node.js内置的http模块即可实现，最简示例代码如下：

const http = require('http');
// 创建HTTP服务，每收到一个请求就会触发回调
const server = http.createServer((req, res) => {
  console.log('收到请求，请求方法：', req.method, '请求路径：', req.url);
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('请求已收到');
});
// 监听3000端口
server.listen(3000, () => {
  console.log('服务已启动，监听端口3000');
});

内容的提问来源于stack exchange，提问作者beto