Как я могу создать отдельный клиент. js файл с socket.io? - PullRequest
Новая
       13

Как я могу создать отдельный клиент. js файл с socket.io?

0 голосов
/ 20 апреля 2020

Как должен выглядеть пример приложения чата (описанный в https://socket.io/get-started/chat/), если бы я хотел, чтобы клиентский скрипт, который в данный момент существует в файле индекса. html, существовал в отдельном клиенте. js файл? Примечание. В этом примере учебного пособия я пытаюсь отобразить a user connected при обновлении веб-страницы, но это работает неправильно.

Я попытался включить <script src="client.js"></script> в заголовок моего файла индекса. html, а затем 

const io = require('socket.io-client');

var socket = io();

в файл клиента. js, но он не работает. Когда я запускаю node server.js, дизайн приложения чата корректно отображается на веб-странице, и я показываю текст listening on *:3000 в терминале, но не текст a user connected, который должен появиться при повторном использовании sh веб-страница.

Мои server.js, index.html и client.js файлы находятся на верхнем уровне каталога и имеют следующий вид:

сервер. js

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html'); // Based on some research, I feel that the problem might
                                           // be here, where I'm sending just a file, not a directory?..
});

io.on('connection', (socket) => {
  console.log('a user connected');
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

index. html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Chat Application</title>
        <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: 0.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; }
          </style>
          <script src="client.js"></script>
    </head>
    <body>
        <ul id="messages"></ul>
        <form action="">
          <input id="m" autocomplete="off" /><button>Send</button>
        </form>
    </body>
</html>

client. js

// I am also unsure if the following is correct...
const io = require('socket.io-client');

var socket = io();
...