Сторона клиента - PullRequest
Новая
       32

Сторона клиента

1 голос
/ 06 октября 2019

Я пытаюсь использовать проект, сгенерированный Express-генератором, чтобы воспроизвести "пример чата", приведенный на официальном сайте Socket.IO . Я хочу сохранить сгенерированную структуру нетронутой. Я почти держу все то же самое, что и "пример чата", и просто пытаюсь втиснуть его в проект, сгенерированный экспресс-генератором. Проблема, с которой я сталкиваюсь, заключается в том, что клиентская сторона не может вызвать скрипт socket.io.js. Здесь я публикую структуру файла проекта, код, который был изменен / добавлен, и сообщения об ошибках. Может ли кто-нибудь быть таким любезным, чтобы помочь мне? Большое спасибо! 1. Структура файла проекта (*: изменение было сделано; **: новый добавленный файл.) 

ioChat (project name)
-- bin
   -- www (*)
-- node_modules
   -- socket.io 
   -- socket.io-adapter
   -- socket.io-client
   -- socket.io-parser
   -- (many other modules)
-- public
   -- images
   -- javascripts
   -- stylesheets
      -- style.css (*)
   -- index.html (**)
-- routes
   -- index.js (*)
   -- users.js
-- views
   -- error.jade
   -- index.jade
   -- layout.jade
-- app.js
-- package-lock.json
-- package.json

2. bin \ www (с добавлением // +++ добавлен код) 

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('iochat:server');
var http = require('http');
var io = require('socket.io')(http); //++++


/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);


// socket io for realtime messaging  //++++
io.on("connection", function(socket){
    socket.on("chat", function(msgin){
        var msgout = { name: msgin.name, msg: msgin.msg , mtime: new Date()};
        io.emit("chat",msgout);
    });
});


/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

3. public \ index.html (недавно добавлено) 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ioChat</title>
        <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
        <script src="/socket.io/socket.io.js"></script>
        <!-- <script src="../node_modules/socket.io-client/dist/socket.io.js"></script> -->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                var socket = io();

                $("#btnSend").on("click",function(){
                    var msgout = {name:$("#senderName").val(), msg:$("#msg").val()};
                    socket.emit('chat',msgout);
                    $("#msg").val("");
                });

                socket.on("chat",function(msgin){
                    $("#msgList").append($("<li>").text(`${msgin.name} says: ${msgin.msg} (msgin.mtime)`));
                });

            });     
        </script>
    </head> 

    <body>
        <ul id="msgList"></ul>
        <div class="iptArea">
            <label for="name" class="msgItems">Name:</label>
            <input type="text" id="senderName"  class="msgItems"/
            <label for="msg"  class="msgItems">Message:</label>
            <input type="text" id="msg"  class="msgItems"/>
            <button class="msgItems" id="btnSend">Send</button>
        </div>
    </body>
</html>

4. route \ index.js (с добавлением кода // +++ добавлен код) 

var express = require('express');
var router = express.Router();

/* GET home page. Let http://localhost:3000 directly go to public\index.html*/
router.get('/'); //+++ 

module.exports = router;

5. Сообщение об ошибке на стороне сервера (по-видимому, 404 не найдено): 

GET /socket.io/socket.io.js 404 34.641 ms - 1142

6. Сообщение об ошибке на стороне клиента: 

GET http://localhost:3000/socket.io/socket.io.js net::ERR_ABORTED 404 (Not Found)
Uncaught ReferenceError: io is not defined

Ответы [ 2 ]

0 голосов
/ 29 октября 2019

После долгих поисков я нашел лучший ответ на свой вопрос. Пожалуйста, обратитесь к Простое учебное пособие по express socket.io с использованием экспресс-генераторов.

0 голосов
/ 07 октября 2019

Вместо простого получения файла с сервера вы можете использовать CDN.

Проверить: https://cdnjs.com/libraries/socket.io

Используйте это в вашем public \ index.html 

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
...