时间戳

首页 > 解决方案 > Socket.io 在 Webhost 中运行

javascript - Socket.io 在 Webhost 中运行

问题描述

我目前是设置虚拟主机服务器的新手，我正在研究 socket.io，我想在实时服务器中运行它，不幸的是它不起作用。我该如何设置？我没有一个想法。

它适用于我的本地但不适用于网络服务器https://kimmychatroom.000webhostapp.com/

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Websocket 101</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>
    <link href="/styles.css" rel="stylesheet">
</head>
<body>
    <div id="mario-chat">
        <h2>Mario Chat</h2>
        <div id="chat-window">
            <div id="output"></div>
            <div id="feedback"></div>
        </div>
        <input id="handle" type="text" placeholder="Handle" />
        <input id="message" type="text" placeholder="Message" />
        <button id="send">Send</button>
    </div>
    <script src="/chat.js"></script>
</body>
</html>

聊天.js

// make connection
var socket = io.connect('http://localhost:4000');

//Query Dom

var message = document.getElementById('message'),
    handle = document.getElementById('handle'),
    btn = document.getElementById('send'),
    output = document.getElementById('output'),
    feedback = document.getElementById('feedback');

// emit events
btn.addEventListener('click', function(){
    socket.emit('chat',{
        message: message.value,
        handle: handle.value
    })
});

message.addEventListener('keypress', function(){
    socket.emit('typing', handle.value)
});

// listen for events
socket.on('chat', function(data){
    feedback.innerHTML = '';
    output.innerHTML +='<p><strong>' + data.handle + ': </strong>' + data.message + '</p>';
})

socket.on('typing', function(data){
    feedback.innerHTML = '<p><em>' + data + ' is typing a message... </em></p>';
});

index.js已编辑

// install npm install nodemon -g
// run nodemon index to run server to gitbash
// https://www.youtube.com/watch?v=vQjiN8Qgs3c&list=PL4cUxeGkcC9i4V-_ZVwLmOusj8YAUhj_9
// install socket.io - npm install socket.io --save


var express = require('express');
var socket = require('socket.io');

// App setup
var app = express();

let port= process.env.PORT || 4000;
var server =  app.listen(port, function(){
    console.log(`listening to request on port ${port}`); 
});

// Static Files

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


// Socket setup

var io = socket(server);

io.on('connection', function(socket){
    console.log('made socket connection', socket.id)

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

    socket.on('typing', function(data){
        socket.broadcast.emit('typing', data)
    })
});

我一点也不知道在 chat.js 套接字变量和 index.js 服务器变量中要改变什么

标签： javascriptnode.jssocketssocket.ioweb-hosting

解决方案

var socket = io.connect('http://localhost:4000');在这里，您不应在部署应用程序时提供 localhost 的 URL。部署时，您应该使用 URL 或网络服务器。或者，如果您使用的是默认命名空间/，那么即使在 localhost 中也不需要使用 URL。你的代码应该是这样的，

//changes here
var socket = io()

//Query Dom
    var message = document.getElementById('message'),
    handle = document.getElementById('handle'),
    btn = document.getElementById('send'),
    output = document.getElementById('output'),
    feedback = document.getElementById('feedback');

// emit events
btn.addEventListener('click', function(){
    socket.emit('chat',{
        message: message.value,
        handle: handle.value
    })
});

message.addEventListener('keypress', function(){
    socket.emit('typing', handle.value)
});

// listen for events
socket.on('chat', function(data){
    feedback.innerHTML = '';
    output.innerHTML +='<p><strong>' + data.handle + ': </strong>' + data.message + '</p>';
})

socket.on('typing', function(data){
    feedback.innerHTML = '<p><em>' + data + ' is typing a message... </em></p>';
});

推荐阅读