Question

我在这里阅读了一些关于SO的问题，一些用户在问如何使用socket.io创建房间。我尝试应用相同的概念，并且在阅读了在已部署的heroku节点websocket服务器上实现的文档，库的.join方法之后，但无法创建房间。如果我单击在UI上创建的按钮，则控制台将记录此错误：

Access to XMLHttpRequest at 'https://mysocketserver.herokuapp.com/socket.io/?EIO=3&transport=polling&t=MqCuSYp' from origin 'https://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我也无法验证邮件是否已发送。我的代码中的问题出在哪里？

server.js

const express = require('express');
const socketIO = require('socket.io');
const path = require('path');
const PORT = process.env.PORT || 3000;

const server = express()
  // .use(function(req, res){
  //   res.sendFile(__dirname + '/index.html');
  // })
  .listen(PORT, function(){
    console.log(`Our app is running on port ${ PORT }`);
  });

const io = socketIO(server);

var users = {};
var rooms = [];

io.on('connection', function(socket){
  console.log(socket);
  console.log('Client connected');
  socket.on('createroom', function(room){
    rooms.push(room);
    io.join(room);
  });
  socket.on('chat message', function(msg){
  //  console.log('message: ' + msg);
    io.to(rooms.room)
    .emit('chat message', msg);
    //io.emit('chat message', msg);
  });
  socket.on('disconnect', function(){
    console.log('Client disconnected');
  });
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      #room { position: fixed; bottom: 94%;}
    </style>
  </head>
  <body>
    <form atcion="" name="room" id="room">
      <input type="text" id="r" type="text" autocomplete="off" /><button>Join</button>
    </form>
    <ul id="messages"></ul>
    <form action="" name="message">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <!-- <script src="/socket.io/socket.io.js"></script> -->
    <script src="node_modules/socket.io-client/dist/socket.io.js"></script>
    <script>
      const socket = io('https://mysocketservice.herokuapp.com');
      $(function(){

        $('form[name="room"]').submit(function(e){
          e.preventDefault();
          socket.emit('createroom', $('#r').val());
          console.log(socket);
        });

        $('form[name="message"]').submit(function(e){
          e.preventDefault(); // prevents page reloading
          socket.emit('chat message', $('#m').val());
          $('#m').val('');
          return false;
        });
        socket.on('chat message', function(msg){
          console.log(msg);
          $('#messages').append($('<li>').text(msg));
        });
    });
    </script>
  </body>
</html>

我想做的事情很简单，当用户插入房间名称，然后单击加入按钮时，我希望创建房间并将用户添加到该房间。对于此解决方案，我正在考虑实施注册或登录系统，但是由于节点开发是我的新手，因此我不确定如何进行操作。

我也在考虑实现的一个更好的简单解决方案是创建一个随机字符串Math.random().toString(36)附加到url，然后，当用户在页面上时，请使用该字符串并创建一个唯一的空间，同一网址上的所有用户都可以聊天。寻找有效解决方案的任何帮助将不胜感激。

Answer 1

您需要在服务器文件中启用cors。

首先，跨域检查由浏览器执行。当JavaScript向源服务器以外的服务器发出XmlHttpRequest时，如果浏览器支持CORS，它将初始化CORS进程。否则，该请求将导致错误（除非用户故意降低了浏览器的安全性）
当服务器遇到原始HTTP标头时，服务器将决定它是否在允许的域列表中。如果不在列表中，则请求将失败（即服务器将发送错误响应）。

npm install cors

然后按如下所示重新编写代码以启用cors

Server.js

const express = require('express');
const socketIO = require('socket.io');
const path = require('path');
const cors= require('cors');
const PORT = process.env.PORT || 3000;

const app = express()

app.use(cors());
  // .use(function(req, res){
  //   res.sendFile(__dirname + '/index.html');
  // })
 const server =  app.listen(PORT, function(){
    console.log(`Our app is running on port ${ PORT }`);
  });

const io = socketIO(server);

var users = {};
var rooms = [];

io.on('connection', function(socket){
  console.log(socket);
  console.log('Client connected');
  socket.on('createroom', function(room){
    // rooms.push(room);
    socket.join(room);
  });
  socket.on('chat message', function(msg){
    //  console.log('message: ' + msg);
  });
  socket.on('disconnect', function(){
    console.log('Client disconnected');
  });
});

我发现这对how to a create room很有帮助。

针对Socket实现进行了修订。

使用socket.io创建空间

server.js

index.html

1 个答案:

Server.js