拒绝应用来自' http:// localhost:63342 / stylesheets / style.css'

时间:2018-06-14 08:32:22

标签: socket.io

我在webstrom上写了一个实时聊天室,我使用socket.io,但是当我在google上运行它时,它无法工作~~它总是说“

拒绝申请来自' http://localhost:63342/stylesheets/style.css'因为其MIME类型(' text / html')不是受支持的样式表MIME类型,并且启用了严格的MIME检查。 polling-xhr.js:268

获取http://localhost:63342/socket.io/?EIO=3&transport=polling&t=MFzK3D- 404(未找到)。



JS:


import 'btford/angular-socket-io/mock/socket-io';
import * as server from "socket.io";

let io = require('socket.io').listen(server);

users = [];
connections = [];

server.listen = function(param) {

}
server.listen(process.env.PORT || 3000);
console.log('Server running...');

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');

});

io.sockets.on('connection', function(socket) {
  connections.push(socket);
  console.log('Connected: %s sockets connected', connections.length);

  socket.on('disconnect', function(data) {
    // if(!socket.username) return;
    users.splice(users.indexOf(socket.username), 1);
    updateUsernames();
    connections.splice(connections.indexOf(socket), 1);
    console.log('Disconnected: %s sockets connected', connections.length);
  });



  socket.on('send message', function(data) {
    console.log(data);
    io.sockets.emit('new message', {
      msg: data,
      user: socket.username
    });
  });

  //new user

  socket.on('new user', function(data, callback) {
    callback(true);
    socket.username = data;
    users.push(socket.username);
    updateUsernames();
  });


  function updateUsernames() {
    io.sockets.emit('get users', users);

  }
});

CSS:


body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  margin-top: 30px;
}

a {
  color: #00B7FF;
}

#messageArea {
  display: none;
}

html:



<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>IO Chat</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
  <link rel="stylesheet" type="text/JavaScript" href="server/server.js">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.dev.js"></script>

</head>

<body>
  <div class="container">
    <div id="userFormArea" class="row">
      <div class="col-md-12">
        <form id="userForm">
          <div class="form-group">
            <label>Enter Username</label>
            <input class="form-control" id="username" />
            <br/>
            <input type="submit" class="btn btn-primary" value="Login" />
          </div>
        </form>
      </div>
    </div>

    <div id="messageArea" class="row">
      <div class="col-md-4">
        <div class="well">
          <h3>Online users</h3>
          <ul class="list-group" id="users"></ul>
        </div>
      </div>
      <div class="col-md-8">
        <div class="chat" id="chat"></div>

        <form id="messageForm">
          <div class="form-group">
            <label>Enter Message</label>
            <textarea class="form-control" id="message"></textarea>
            <br/>
            <input type="submit" class="btn btn-primary" value="Send Message" />
          </div>
        </form>
      </div>
    </div>
  </div>

  <script>
    $(function() {
      let socket = io.connect();
      let $messageForm = $('messageForm');
      let $chat = $('#chat');
      let $messageArea = $('#messageArea');
      let $userFormArea = $('#userFormArea');
      let $userForm = $('#userForm');
      let $users = $('#users');
      let $username = $('#username');



      $messageForm.submit(function(e) {
        e.preventDefault();
        socket.emit('send message', $message.val());
        $message.val('');
      });

      socket.on('new message', function(data) {
        $chat.append('<div class="well"><strong>' + data.user + '</strong>:' + data.msg + '</div>')
      });

      $userForm.submit(function(e) {
        e.preventDefault();
        socket.emit('new user', $username.val(), function(data) {
          if (data) {
            $userFormArea.hide();
            $messageArea.show();
          };

        });
        $username.val('');
      });

      socket.on('get users', function(data) {
        let html = '';
        for (let i = 0; i < data.length; i++) {
          html += '<li class="list-group-item"' + data[i] + '</li>';
        };

        $users.html(html);
      });
    });
  </script>

</body>

</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案
相关问题