Question

我正在学习如何使用nodejs（express）和WebSockets设置一个非常简单的聊天应用程序的教程。我可以确认客户端和服务器之间的连接已建立，但无法弄清楚为什么“聊天”事件不会被另一方的服务器处理。我使用的是Socket.io 2.04，而我的服务器已经用完了Cloud9。我只是想设置一个工作示例，所以我在网页的同一个文件中有CSS，HTML和脚本。知道我做错了什么吗？我花了足够的时间摆弄这个，我真的可以使用一些专家建议......

    // server side code

        var express =require("express");
        var app = express();

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

        var bodyParser = require("body-parser");

        app.use(bodyParser.json());

        app.use(function(req, res, next) {
          res.header("Access-Control-Allow-Origin", "*");
          res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
          next();
        });

        app.use(express.static(__dirname + "/public"));

       app.get("/websockets", function(req, res) {
       res.render("websockets.ejs");
});


var server = app.listen(process.env.PORT, process.env.IP, function(){
    console.log("SERVER IS RUNNING!");
});

// Socket setup 
var io = socket(server);


io.on('connection', function(socket){

    console.log('made socket connection', socket.id);

    // Handle chat event
    socket.on('chat', function(data){
        console.log(data);
        io.sockets.emit('chat', data);
    });

});

及以下是发送给客户的页面

<html>
    <head>
        <meta charset="utf-8">
        <title>WebSockets 101</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>


        <style>
                        body{
                font-family: 'Nunito';
            }

            h2{
                font-size: 18px;
                padding: 10px 20px;
                color: #575ed8;
            }

            #mario-chat{
                max-width: 600px;
                margin: 30px auto;
                border: 1px solid #ddd;
                box-shadow: 1px 3px 5px rgba(0,0,0,0.05);
                border-radius: 2px;
            }

            #chat-window{
                height: 400px;
                overflow: auto;
                background: #f9f9f9;
            }

            #output p{
                padding: 14px 0px;
                margin: 0 20px;
                border-bottom: 1px solid #e9e9e9;
                color: #555;
            }

            #feedback p{
                color: #aaa;
                padding: 14px 0px;
                margin: 0 20px;
            }

            #output strong{
                color: #575ed8;
            }

            label{
                box-sizing: border-box;
                display: block;
                padding: 10px 20px;
            }

            input{
                padding: 10px 20px;
                box-sizing: border-box;
                background: #eee;
                border: 0;
                display: block;
                width: 100%;
                background: #fff;
                border-bottom: 1px solid #eee;
                font-family: Nunito;
                font-size: 16px;
            }

            button{
                background: #575ed8;
                color: #fff;
                font-size: 18px;
                border: 0;
                padding: 12px 0;
                width: 100%;
                border-radius: 0 0 2px 2px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>

       <div id="mario-chat">
           <div id="chat-window">
               <div id="output"></div>
           </div>
           <input id="handle" type="text" placeholder="Handle"/>
           <input id="message" type="text" placeholder="Message"/>
           <button id="send">Send</button>
       </div>


        <script>
                   // Make connection
            var socket = io.connect('https://mywebsitename:8080');

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

// Emit events
btn.addEventListener('click', function(){
  socket.emit('chat', {
      message: message.value,
      handle: handle.value
  });
  message.value = "";
  console.log("It should have sent out a chat event...");
});

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

简单的websocket教程应用程序尽管已连接

0 个答案: