php - 有没有办法不用数据库就可以创建群聊？

Question

我想创建一个群聊，并希望将所有消息和匹配的用户名存储在一个 JSON 文件中。

但是，如果不使用 node.js 或 MySQLi，这看起来很难做到。

正如您在下面看到的，我已经可以读取 JSON 并将其显示在“chat-wrap”中。问题是使用 PHP 和/或 AJAX 将消息添加到 json 文件，并自动更新 HTML。

输入是用户键入消息的地方，我假设我必须使用 JS 来通知何时按下 ENTER，因为我不想使用表单(除非你可以说服我否则)。

我的 HTML:

<div class="col chat">
    <div class="messages" id="chat-wrap"> 
        <?php include "chat/chat_process.php"; ?>
    </div>
    <input maxlength='100' type="search" name="type_message" id="type_message" placeholder="Type a message...">
</div>

JSON 示例:

{
    "message_list": [{
            "uname": "User 1",
            "text": "Hello everyone!"
        },
        {
            "uname": "User 2",
            "text": "Hey!"
        },
        {
            "uname": "User 1",
            "text": "Hello!"
        }
    ]
}

我已经试过弄乱下面的代码，但我是 JS 和 AJAX 的新手，所以当然下面的代码并没有真正解决......

$("#type_message").keypress(function (event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {

        var msg = $("#type_message").val();
        if (msg.length == 0) {
            alert("Enter a message first!");
            return;
        }

        var name = 'Username';

        var data = {
            uname: name,
            text: msg
        };

        $.ajax({
            type: "POST",
            url: "chat.php",
            data: {
                data: JSON.stringify(data)
            },
            dataType: "json",
            success: function (response) {
                // display chat data stored in text file 
            }
        });
    }
});

当键入和输入一条消息时，它应该添加到 JSON 文件中并在每个用户屏幕上实时显示。如果我忘了澄清任何事情，请原谅我，我对 stackoverflow 有点陌生，我不确定你们都希望知道什么......谢谢!

Answer 1

我向您的成功功能添加了一些代码，因此您应该能够将新文本动态添加到您的 html 并将更改保存到您的文件 messages.json。

  $("#type_message").keypress(function(event) {
let keycode = event.keyCode ? event.keyCode : event.which;
if (keycode == "13") {
  let msg = $("#type_message").val();
  if (msg.length == 0) {
    alert("Enter a message first!");
    return;
  }

  let name = "Username";

  let data = {
    uname: name,
    text: msg
  };
  currentjson.push(data); // Also added one global variable which allows you to push the new data into the old json array.
  $.ajax({
    type: "POST",
    url: "chat/chat.php", // I changed the url slightly since i put the php files in another directory
    data: {
      data: JSON.stringify(currentjson)
    },
    dataType: "json",
    success: function(response) {
      $(".chat").html("");    // Reset the html of the chat
      addNodes(response); // Add the new Data to the chat by calling addNodesfunction
    },
    error: function(err) {
      console.log(err);
    }
  });
}

这是保存 json 的 php 文件:

<?php
$file = fopen('messages.json','w');
$data = $_POST['data'];
fwrite($file,$data);
fclose($file);
echo $data; // return the new data set

添加节点函数:

function addNodes(messages) {
  for (let message of messages) {
    const chatDiv = $(".chat");
    const user = document.createElement("h3");
    const content = document.createElement("p");
    user.textContent = message.uname;
    content.textContent = message.text;
    chatDiv.append(user);
    chatDiv.append(content);
  }
}

我还更改了您的 json 以使其更容易循环:(json 示例)

[
  { "uname": "User 1", "text": "Hello everyone!" },
  { "uname": "User 2", "text": "Hey!" },
  { "uname": "User 1", "text": "Hello!" }
]

最后整个 client.js 代码如下所示:

$(document).ready(() => {
  let currentjson = undefined;
  $.ajax("chat/chat_process.php", { // This gets the file the first time the user opens the page
    success: function(data) {
      const messages = JSON.parse(data); 
      currentjson = messages;
      addNodes(currentjson);
    },
    error: function() {
      alert("There was some error performing the AJAX call!");
    }
  });

  $("#type_message").keypress(function(event) {
    let keycode = event.keyCode ? event.keyCode : event.which;
    if (keycode == "13") {
      let msg = $("#type_message").val();
      if (msg.length == 0) {
        alert("Enter a message first!");
        return;
      }

      let name = "Username";

      let data = {
        uname: name,
        text: msg
      };
      currentjson.push(data); // Also added one global variable which allows you to push the new data into the old json array.
      $.ajax({
        type: "POST",
        url: "chat/chat.php",
        data: {
          data: JSON.stringify(currentjson)
        },
        dataType: "json",
        success: function(response) {
          $(".chat").html("");    // Reset the html of the chat
          addNodes(response); // Add the new Data to the chat by calling addNodesfunction
        },
        error: function(err) {
          console.log(err);
        }
      });
    }
  });
});
function addNodes(values) {
  for (let message of values) {
    const chatDiv = $(".chat");
    const user = document.createElement("h3");
    const content = document.createElement("p");
    user.textContent = message.uname;
    content.textContent = message.text;
    chatDiv.append(user);
    chatDiv.append(content);
  }
}

但剩下的最后任务是向当前使用该网站的所有用户显示新数据。为了能够做到这一点，我认为您可以每 5 秒使用一次 setInterval，并调用一个函数来检测 messages.json 是否被任何用户更改，然后相应地进行更新。

希望我的回答对您有用:)