Question

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

但是，如果不使用node.js或MySQLi，很难做到这一点。

正如您在下面看到的那样，我已经可以读取JSON并将其显示在“聊天包装”中。问题是使用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

addNodes函数：

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并调用一个函数，该函数将检测message.json是否被任何用户更改，然后进行相应的更新。

我希望我的回答有用：）

Answer 2

如果您将数据注册到服务器端的变量或文本文件中，我相信您可以。

您可以使用服务器发送的事件触发操作

https://www.w3schools.com/html/html5_serversentevents.asp

PS：有人在这里做过

https://www.developphp.com/video/JavaScript/Server-Sent-Events-Simple-Chat-Application-Example

Answer 3

直接更新会话以进行聊天

优势：这比传递文件，将信息存储在DB中要快得多。它消耗的资源少得多。它避免了很多处理聊天的中间人系统。它并不会使您不断增加数据量。保留用户数据可以避免很多法律问题（因为不是）。

缺点：您-必须-以某种最适合您的用例的方式确保它的安全。此外，如果出现问题，对会话切换进行故障排除有时可能会很麻烦。如果您要出售用户数据，则无用。

在php中，将信息存储在会话数据中。然后，启动一个子进程（与当前会话断开连接），该子进程加载另一个用户的会话，并更新另一个用户的会话数据，使每个会话在其会话中均持有一个变量，该变量存储其他用户的会话ID。聊天。

Mychat.php

$message = "" // Whatever's said
$groupids = implode(",", $other_users_ids); //Whatever your group's ids are.
$_SESSION["group_chat_users"]["my_id"] = session_id();
$_SESSION["my_chat_log"][]= $message;
exec("php my_group_update.php $groupids $_SESSION["group_chat_users"]["my_id"] $message");

my_group_update.php

$groupids = explode(",", $argv[1]);
$calling_user = $argv[2];
$message = $argv[3];
foreach ($groupids as $userid){
    session_start($userid);
    $_SESSION["my_chat_log"][]= $message");
}

对于输出JSON，它很简单：

fetch_log.php

header('Content-Type: application/json');
echo json_encode($_SESSION["my_chat_log"]);

让用户拥有自己的JSON日志，而无需触摸硬盘驱动器（或者，如果愿意，也可以将其写入硬盘驱动器。）

注意：不言而喻（但显然需要说），一如既往，请验证您的输入。否则，您很容易被注射。

对预防注射的方式有何建议：

让$ message为用Mychat.php编写并拉入my_group_update.php的临时文件名
在Mychat.php中将$ message转换为十六进制字符串，并在my_group_update.php中将其转换回
更改my_group_update，以从第一个用户的会话中提取消息，然后再切换到粘贴该消息的其他用户。
提醒mychat在exec调用中不包含group_id以外的任何变量。然后让my_group_update取得组ID，并在所有共享的聊天会话数组中循环，找到所有新值，并用它更新所有聊天<---（可能是最好的）。
启动一个仅处理1个聊天的非常小的临时VM，（也许与alpine linux或类似操作系统一起运行，并且体积很小，然后在聊天结束时自动销毁。）这会增加很多开销，但是比您甚至会考虑做的任何事情都更安全。

列表继续。

有没有不用数据库就可以建立群聊的方法吗？

3 个答案:

直接更新会话以进行聊天

注意：不言而喻（但显然需要说），一如既往，请验证您的输入。否则，您很容易被注射。