NexusDotNet/replit.txt at main · EagleAglow/NexusDotNet · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
Replit configuration
====================

Packages:
  engine.io 6.2.0
  express 4.18.1
  html 1.0.0
  redis 4.3.1
  server 1.0.37
  socket.io 4.5.2
  cors 2.8.5

Root Folder:
  File: index.js
  Folder: html
	File: index.html

Files:
  index.js
  ========
    const express = require('express');
    const app = express();
    const http = require('http');
    const cors = require('cors');
    // port is ignored by replit for browser URL to call this server
    const port = 3000;
    const httpServer = http.createServer(app);
    const path = require('path');

    const io = require("socket.io")(httpServer, {
      cors: {
        origin: "*",
        methods: ["GET", "POST"]
      }
    });

    app.get('/', (req, res) => {
    //  res.send('Server is up and running');
      res.sendFile(path.join(process.cwd(), "/html/index.html"));
    });

    httpServer.listen(port, () => {
      console.log('listening on *:' + port);
    });

    io.on('connection', (socket) => {
      console.log('connect');

      socket.on('chat_message', (msg) => {
        io.emit('chat_message', msg);
      });

      socket.on("disconnect", () => {
        console.log("disconnect");
      })
    })


  index.html
  ==========
  <!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

      #chat_send { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
      #chat_msg { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
      #chat_msg:focus { outline: none; }
      #chat_send > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }

      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages > li { padding: 0.5rem 1rem; }
      #messages > li:nth-child(odd) { background: #efefef; }
    </style>
  </head>
<script src="/socket.io/socket.io.js"></script>
  <script>
    function io_submit(){
      const chat_text = document.getElementById('chat_msg');
      if (chat_text.value.length > 0)
      {
        socket.emit('chat_message', chat_text.value);
        chat_text.value = '';
      }
    };

    const socket = io();

    socket.on('chat_message', (msg) => {
      const messages = document.getElementById('messages');
      const item = document.createElement('li');
      const newContent = document.createTextNode(msg);
      item.appendChild(newContent);
      messages.appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });
  </script>
  <body>
    <p>Messages from <b>other</b> clients show here</p>
    <ul id="messages">
    </ul>
    <form id="chat_send" action="">
      <input id="chat_msg" autocomplete="off" type="text"/><button onclick="io_submit();">Send</button>
    </form>
  </body>
</html>