时间戳

首页 > 解决方案 > 如何使用 node.js 和 socket.io 连接到已建立的服务器（不是本地主机）？

javascript - 如何使用 node.js 和 socket.io 连接到已建立的服务器（不是本地主机）？

问题描述

我对网络服务器/node.js/socket.io 非常陌生，我正在尝试制作一个非常简单的网站，只是为了学习如何连接 2 个人。我找到的所有教程都教你如何在 localhost 上运行你的应用程序，但我想在服务器上运行它，这样每个人都可以访问它。

我找到了这个托管网站 - Zeit-Now - 并设法让我的网站上线。我的网站在本地主机上运行得很好，但是当我把它放到网上时我无法让它工作。我认为问题出在我的代码中的这两行中，'???' 是。

索引.html：

<!DOCTYPE html>

<html>

<head>
    <title>A2</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
</head>

<body>
    <input id="sendMsg" type="text" placeholder="TYPE TO SEND">
    <input id="receiveMsg" type="text" placeholder="RECEIVE HERE">
    <button id="sendBtn">Send</button>

    <script>

var socket = io.connect('https://web-socket-2.quaei.now.sh/');

var sendMsg = document.getElementById('sendMsg');
var receiveMsg = document.getElementById('receiveMsg');
var sendBtn = document.getElementById('sendBtn');

// Emit events
sendBtn.addEventListener('click', () => {
    socket.emit('chat', {
        message: sendMsg.value
    });
});

// Listen for events
socket.on('chat', data => {
    receiveMsg.value = data.message;
});

    </script>
</body>

</html>

index.js：

const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

app.use(express.static('public'));

io.on('connection', socket => {
    console.log('Connection! ->', socket.id);

    socket.on('chat', data => {
        io.sockets.emit('chat', data);
    });
});

我也试过：

var socket = io.connect(https://web-socket-2.quaei.now.sh/);

和

var server = app.listen(80, https://web-socket-2.quaei.now.sh/);

我希望我的网站能够读取第一个输入字段中写入的内容，并在单击发送时在第二个输入字段中输出（这在 localhost 上运行良好），但是当我使用 Zeit-Now 将它放到网上时它不起作用。

编辑：

现在.json：

{
    "version": 2,
    "name": "web-socket-2",
    "builds": [{
            "src": "public/**/*",
            "use": "@now/static"
        },
        {
            "src": "*.js",
            "use": "@now/node"
        }
    ],
    "routes": [{
        "src": "/",
        "dest": "public/index.html"
    }]
}

我有一个#websocket-2带有now.json,index.js和文件夹的public文件夹。在public文件夹中我有index.html.

我怎样才能让它在这个网站上工作：https ://web-socket-2.quaei.now.sh/ ？

标签： javascriptnode.jssocket.iovercel

解决方案

确保您的服务器启用了 websocket。（它实际上并不需要 websockets，但如果可能的话，它会使用它来更好地传输）

阅读有关 zeit.co 的信息，我可以看到他们不支持 websockets，也不确定他们是否支持吸盘。如果下面的代码对您没有帮助，我建议您通过电子邮件联系他们以确认这一点。

要在客户端运行连接，请在安装 socket.io-client 之后或在您拥有的标头中包含脚本之后。

您只需使用 io.connect('SERVER URL') 进行连接，它将返回您的套接字连接实例。（如果在同一台服务器上运行，则无需通过服务器）

const socket = io.connect('http://youserver.com'); 
// You can listen to conenct and disconnect to track your connection
socket.on('connect', socket => {
    console.log('Connected', socket.id); 
});

就是在客户端。

在服务器端，您需要将服务器传递给您的 socket.io 模块

const io = require('socket.io')(server);
// You can listen to your socket connecting through connect and disconnect
io.on('connect', (socket) => {
  console.log('socket connected', socket);
});

您可以使用“错误”事件在客户端跟踪您的错误，并确保检查您的控制台以查看有关连接的日志。

如果您使用的是 express 服务器，并且套接字在控制台中引发 404 错误，请确保使用 http 而不是 express 启动服务器。

const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server); 

// your socket and routes

server.listen(process.env.PORT || 3500, () => {
   console.log(`Localhost working on ${process.env.PORT || 3500}`);
}

推荐阅读