[DOCKER] Ein Memo, das die einfache Chat-Anwendung von Node.js + socket.io enthält

Hintergrund

Ein Memo, wenn die einfache Chat-Anwendung von Node.js + socket.io containerisiert ist

Link-Sammlung

Make Node.js Web Application Docker

Ein Dokument, das einen einfachen Node.js-Server erstellt, der Hello World zurückgibt und daraus einen Container macht. Ich konnte die Erinnerung an Node.js wiedererlangen, die ich fast vergessen hätte.

Socket.io#Get Started Sie können eine einfache App mit socket.io erstellen

Beispielcode

package.json


{
  "name": "docker_web_app",
  "version": "1.0.0",
  "description": "Node.js on Docker",
  "author": "shogo suzuki",
  "main": "socket_server.ts",
  "scripts": {
    "start": "node socket_server.js"
  },
  "dependencies": {
    "express": "*",
    "socket.io": "^2.3.0"
  }
}

Dockerfile



FROM node:14.13
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "node", "socket_server.ts" ]

index.html



<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</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>
  </head>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    $(function () {
      var socket = io();
      $('form').submit(function(e){
        e.preventDefault(); // prevents page reloading
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
      socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
      });
    });
  </script>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

socket_server.ts



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');
});

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

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

Lauf

docker build -t socket-example:1.0 .
docker run -p 3000:3000 -d socket-example:1.0

Recommended Posts

Ein Memo, das die einfache Chat-Anwendung von Node.js + socket.io enthält
Überprüfen Sie die Funktion von zwei Rollen mit einer Chat-Anwendung
Ein Memo, das nüchtern von der Anfrage nach mehrteiligen / Formulardaten abhängig war
Ein einfaches Beispiel für ein Servlet, das Japanisch anzeigt
[Lösung] Ein Memo, das mir schwer fiel, weil sich das Format der Sinatra-Validierung geändert hat.
Ein Memo des Programms, mit dem Sie feststellen können, dass die Wahrscheinlichkeit eines Würfelwurfs etwa 1/6 beträgt
[Arbeitsnotiz für persönliche Anwendungen] Verschieben Sie den Speicherort der Schaltfläche "Folgen"
Ein Programm, das die Anzahl der Wörter in einer Liste zählt
Eine Geschichte, die mich bedauerte, als während der Entwicklung der Spring Boot-App eine "NotReadablePropertyException" auftrat.
Eine Geschichte, die mit der Einführung von Web Apple Pay zu kämpfen hatte
Lassen Sie uns eine TODO-App in Java 5 erstellen. Schalten Sie die Anzeige von TODO um
Lassen Sie uns ein custom_cop erstellen, das auf das Schütteln des Namens hinweist
Dies und das von JDK
Ein Memorandum über das FizzBuzz-Problem
Ein Memo, das Spring Boot berührte
Fälle, in denen Benutzer beim Bearbeiten einer App abgemeldet sind (Rails)
Ein Memo, wenn Sie den Zeitteil des Kalenders löschen möchten
Eine Sammlung von Phrasen, die das "unterschiedliche Gefühl" von Java und JavaScript beeindruckt
Android App: Lassen Sie uns den Mechanismus des Bildschirmübergangs mit einfachem Code erklären
Beispielprogramm, das den Hashwert einer Datei in Java zurückgibt
Bereitstellen einer Node.js-Anwendung auf einer ECS-Instanz mithilfe des Cloud Toolkit