0

私はWebサーバー/ node.js / socket.ioに非常に慣れていません.2人を接続する方法を学ぶためだけに、非常に単純なWebサイトを作成しようとしています. 私が見つけたすべてのチュートリアルは、localhost でアプリを実行する方法を教えてくれますが、サーバーで実行して、誰もがアクセスできるようにしたいと考えています。

このホスティング Web サイト (Zeit-Now) を見つけて、Web サイトをオンラインにすることができました。私の Web サイトは localhost では正常に動作しますが、オンラインにすると動作しません。問題は私のコードのこれらの 2 行にあると思います。それは。

index.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/);

私は自分のウェブサイトが最初の入力フィールドに書かれていることを読んで、送信をクリックすると2番目の入力フィールドに出力することを期待しています（これはローカルホストでうまく動作します）が、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.jsonindex.jspublicpublicindex.html

この Web サイトで機能させるにはどうすればよいですか: https://web-socket-2.quaei.now.sh/ ?

4

3 に答える 3