replitで簡易的なオンラインチャットを作成できたのでメモ。

~~ここで実際の動作を見れます。~~

ruiwenge2氏のガイドを参照して作成。より単純なオンラインの例が載ってある。

15:36追記：最新チャットが上になるように変更。
~~16:28追記：repl再起動後、それ以前にチャットに参加した人の名前がundefinedになる不具合アリ。~~
再起動前に参加したか確認し、その場合は自動でリロードするよう修正。
~~19:36追記：開発者ツールを用いれば改行が使えるらしい。要修正~~
21:05追記
・改行を無効化。
・なぜか日本時間じゃなかったので修正。

index.js (サーバー)

index.js

const express = require("express"); // use express
const app = express(); // create instance of express
const server = require("http").Server(app); // create server
const io = require("socket.io")(server); // create instance of socketio

app.use(express.static("public")); // use "public" directory for static files
const users = {};
const textlog = [];

io.on("connection", socket => {
  socket.on("setup", () => {
    if (textlog.length>0){
      io.emit("updatelog",textlog);
    }
  });
  socket.on("joined", (name) => { // when server recieves the "joined" message
    username = name.split('\n').join(" ")
    users[socket.id] = username; // add user to dictionary
    updatetextlog(getnowtime() + " " + username + " joined")
    console.log(users);
    io.emit("updatelog",textlog);
  });
  socket.on("sendmes", (text) => {
    if (socket.id in users){
      username = users[socket.id];
      updatetextlog(getnowtime() + " " + username + " : "+text.split('\n').join(" "));
      io.emit("updatelog",textlog);
    }else{
      io.to(socket.id).emit("reload")
    }
  });
  socket.on("disconnect", () => { // when someone closes the tab
    if (socket.id in users){
      username = users[socket.id]
      delete users[socket.id]; // remove user from dictionary
      console.log(users);
      updatetextlog(getnowtime() + " " + username + " leaved")
      io.emit("updatelog",textlog);
    }
  });
});

function updatetextlog(newtext){
  textlog.unshift(newtext)
  if (textlog.length>100){
    N=textlog.length-100
    for (let i=0;i<N;i++){
      textlog.pop();
    }
  }
}

function getnowtime(){
  date = new Date();
  text = "";
  textlist = [(date.getHours()+9)%24,date.getMinutes(),date.getSeconds()];
  for (let i=0;i<3;i++){
    if (textlist[i]<10){
      text += "0" + textlist[i]
    }else{
      text += textlist[i]
    }if (i<2){
      text+=":"
    }
  }
  return text
}

server.listen(3000); // run server

・io.emit("関数名", 変数)でクライアント側のsocket.on("関数名",処理)を実行する。
・クライアント側のsocket.emit("関数名", 変数)が実行された際、こちらのsocket.on("関数名",処理)が実行される。

index.html / script.js (クライアント)

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chat test</title>
</head>
<body>
<script src="/socket.io/socket.io.js"></script> <!-- use the library -->
<script src="/script.js"></script> <!-- use "script.js" file -->
<div id="chatbox"><input type="text" id="textbox" placeholder="type your name"><input type="button" value="join the chat" onclick="join()"></div>
<div id="logbox">chat log</div>
</body>
</html>

script.js

const socket = io(); // create new instance

socket.emit("setup");

socket.on("updatelog", (textlog) => {
  log=document.getElementById("logbox");
  log.innerHTML = ""
  for (let i=0;i<textlog.length;i++){
    log.innerText += textlog[i]+"\n"
  }
});

socket.on("reload",()=>{location.reload();})

function join(){
  text=document.getElementById("textbox");
  if (text.value!==""){
    socket.emit("joined",text.value);
    chat=document.getElementById("chatbox");
    chat.innerHTML = '<input type="text" id="textbox" size="600"><input type="button" value="send" onclick="send()">';
  }
}

function send(){
  text=document.getElementById("textbox");
  if (text.value!==""){
    socket.emit("sendmes",text.value);
    text.value="";
  }
}

・socket.emit("関数名", 変数)でサーバー側のsocket.on("関数名",処理)を実行する。
・サーバー側のio.emit("関数名", 変数)が実行された際、こちらのsocket.on("関数名",処理)が実行される。

追記

Replit Databaseを用いれば、repl再起動後もチャットを保存できる。

以下の例では、テキスト中の\n(≠\\n)に反応してログが崩れる可能性がある。

index.js

const express = require("express"); // use express
const app = express(); // create instance of express
const server = require("http").Server(app); // create server
const io = require("socket.io")(server); // create instance of socketio
+ const Database = require("@replit/database")
+ const db = new Database()

app.use(express.static("public")); // use "public" directory for static files
const users = {};
const textlog = [];
+ db.get("textlog").then(value => {Array.prototype.push.apply(textlog, value.split("\n"))});

io.on("connection", socket => {
  socket.on("setup", () => {
    if (textlog.length>0){
      io.emit("updatelog",textlog);
    }
  });
  socket.on("joined", (name) => { // when server recieves the "joined" message
    username = name.split('\n').join(" ")
    users[socket.id] = username; // add user to dictionary
    updatetextlog(getnowtime() + " " + username + " joined")
    console.log(users);
    io.emit("updatelog",textlog);
  });
  socket.on("sendmes", (text) => {
    if (socket.id in users){
      username = users[socket.id];
      updatetextlog(getnowtime() + " " + username + " : "+text.split('\n').join(" "));
      io.emit("updatelog",textlog);
    }else{
      io.to(socket.id).emit("reload")
    }
  });
  socket.on("disconnect", () => { // when someone closes the tab
    if (socket.id in users){
      username = users[socket.id]
      delete users[socket.id]; // remove user from dictionary
      console.log(users);
      updatetextlog(getnowtime() + " " + username + " leaved")
      io.emit("updatelog",textlog);
    }
  });
});

function updatetextlog(newtext){
  textlog.unshift(newtext)
  if (textlog.length>100){
    N=textlog.length-100
    for (let i=0;i<N;i++){
      textlog.pop();
    }
  }
+ db.set("textlog", textlog.join("\n")).then(() => {});
}

function getnowtime(){
  date = new Date();
  text = "";
  textlist = [(date.getHours()+9)%24,date.getMinutes(),date.getSeconds()];
  for (let i=0;i<3;i++){
    if (textlist[i]<10){
      text += "0" + textlist[i]
    }else{
      text += textlist[i]
    }if (i<2){
      text+=":"
    }
  }
  return text
}

server.listen(3000); // run server