部署在Heroku的Node.js服务端-客户端应用端口配置问题

嘿，我来帮你搞定这个端口配置的坑！首先咱们先捋清楚服务端的小问题，再对应调整客户端的连接方式。

第一步：先修正服务端的端口配置 #

你当前的服务端代码里const port = process.env.PORT;有个隐患：本地开发时如果没设置PORT环境变量，这个值会是undefined，直接导致app.listen(port)启动失败。得给它加个本地默认值，兼容本地和生产环境：

const port = process.env.PORT || 3000; // 本地默认用3000，生产环境用平台分配的端口
const express = require('express'), http = require('http');
const app = express();
const server = app.listen(port);
const io = require('socket.io').listen(server);

第二步：客户端的正确连接方式 #

Socket.io自带了灵活的自动适配能力，不用硬编码端口和域名，咱们分两种场景说：

本地开发环境 #

服务端修正后默认用3000端口，客户端有两种靠谱写法：

• 推荐写法（自动适配）：直接调用io()，它会自动检测当前页面的协议、域名和端口，完全不用硬编码：

  var socket = io();
  

• 手动指定写法：如果想明确写出来，注意本地一般用http而非https（除非你本地配置了HTTPS证书）：

  var socket = io.connect('http://localhost:3000/');
  

Heroku生产环境 #

Heroku会自动给你的应用分配端口（就是process.env.PORT的值），而且通过反向代理提供HTTPS服务，绝对不能硬编码3000端口！正确写法：

• 推荐写法（自动适配）：同样用自动适配，不用改任何代码：

  var socket = io();
  

• 手动指定域名写法：只需要写你的Heroku域名，不用加端口：

  var socket = io.connect('https://myweb.herokuapp.com/');
  

为啥之前的https://myweb.herokuapp.com:3000/不行？因为Heroku上你的应用实际跑的端口不是3000，是平台动态分配的，硬指定3000会连到不存在的服务上。

总结 #

核心思路就是：服务端要兼容本地和生产环境的端口，客户端尽量用Socket.io的自动适配能力，避免硬编码端口，这样不管是本地调试还是部署到Heroku都不用改客户端代码~

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