Question

我有一个使用套接字MongoDB，Express构建的简单聊天应用程序。托管在我的本地计算机上时，该应用程序正常工作（localhost：4000）。我能够连接到MongoDB并发送和接收消息。问题：但是当我使用PC IP地址（例如192.168.1.108:4000）在手机浏览器上打开应用程序时。我可以看到index.html页面，但无法发送和接收消息并从mongodb加载以前的消息。

//server.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
connections = [];

app.use(express.static(__dirname + '/public'));
server.listen(process.env.PORT || 4000);
console.log('Server Running');



app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});


const mongo = require('mongodb').MongoClient;
const client = require('socket.io').listen(server).sockets;



// Connect to mongo
mongo.connect('mongodb://127.0.0.1/mongochat', function(err, db){
    if(err){
        
		throw err;
    }

    console.log('MongoDB connected...');

    // Connect to Socket.io
    client.on('connection', function(socket){
        let chat = db.collection('chats');

        // Create function to send status
        sendStatus = function(s){
            socket.emit('status', s);
        }

        // Get chats from mongo collection
        chat.find().limit(100).sort({_id:1}).toArray(function(err, res){
            if(err){
                throw err;
            }

            // Emit the messages
            socket.emit('output', res);  //whenever we have to pass from server to client(index.html) , we do .emit()
        });

        // Handle input events
        socket.on('input', function(data){
            let name = data.name;
            let message = data.message;

            // Check for name and message
            if(name == '' || message == ''){
                // Send error status
                sendStatus('Please enter a name and message');
            } else {
                // Insert message
                chat.insert({name: name, message: message}, function(){
                    client.emit('output', [data]);

                    // Send status object
                    sendStatus({
                        message: 'Message sent',
                        clear: true
                    });
                });
            }
        });

        // Handle clear
        socket.on('clear', function(data){
            // Remove all chats from collection
            chat.remove({}, function(){
                // Emit cleared
                socket.emit('cleared');
            });
        });
    });
});

<!-- Index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <title>MongoChat</title>
    <style>
        #messages{height:300px;}
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 col-sm-12">
                <h1 class="text-center">
                    MongoChat 
                    <button id="clear" class="btn btn-danger">Clear</button>
                </h1>
                <div id="status"></div>
                <div id="chat">
                    <input type="text" id="username" class="form-control" placeholder="Enter name...">
                    <br>
                    <div class="card">
                        <div id="messages" class="card-block">

                        </div>
                    </div>
                    <br>
                    <textarea id="textarea" class="form-control" placeholder="Enter message..."></textarea>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>

    <script>
        (function(){
            var element = function(id){
                return document.getElementById(id);
            }

            // Get Elements
            var status = element('status');
            var messages = element('messages');
            var textarea = element('textarea');
            var username = element('username');
            var clearBtn = element('clear');

            // Set default status
            var statusDefault = status.textContent;

            var setStatus = function(s){
                // Set status
                status.textContent = s;

                if(s !== statusDefault){
                    var delay = setTimeout(function(){
                        setStatus(statusDefault);
                    }, 4000);
                }
            }

            // Connect to socket.io
            var socket = io.connect('http://127.0.0.1:4000');

            // Check for connection
            if(socket !== undefined){
                console.log('Connected to socket...');

                // Handle Output
                socket.on('output', function(data){
                    //console.log(data);
                    if(data.length){
                        for(var x = 0;x < data.length;x++){
                            // Build out message div
                            var message = document.createElement('div');
                            message.setAttribute('class', 'chat-message');
                            message.textContent = data[x].name+": "+data[x].message;
                            messages.appendChild(message);
                            messages.insertBefore(message, messages.firstChild);
                        }
                    }
                });

                // Get Status From Server
                socket.on('status', function(data){
                    // get message status
                    setStatus((typeof data === 'object')? data.message : data);

                    // If status is clear, clear text
                    if(data.clear){
                        textarea.value = '';
                    }
                });

                // Handle Input
                textarea.addEventListener('keydown', function(event){
                    if(event.which === 13 && event.shiftKey == false){
                        // Emit to server input
                        socket.emit('input', {
                            name:username.value,
                            message:textarea.value
                        });

                        event.preventDefault();
                    }
                })

                // Handle Chat Clear
                clearBtn.addEventListener('click', function(){
                    socket.emit('clear');
                });

                // Clear Message
                socket.on('cleared', function(){
                    messages.textContent = '';
                });
            }

        })();
    </script>
</body>
</html>

Answer 1

尝试通过server.listen（process.env.PORT || 4000，＆＃39; 0.0.0.0＆＃39;）绑定http服务器0.0.0.0，并在index.html中绑定

var socket = io.connect('http://127.0.0.1:4000');

实际上应该是你的内部ip。

如何使用访问本地托管聊天应用程序的其他设备连接到MongoDB？

1 个答案: