Show timestamp

Cargo.lock

@@ -242,7 +242,10 @@ checksum = "7f2c685bad3eb3d45a01354cedb7d5faa66194d1d58ba6e267a8de788f79db38"
 dependencies = [
  "android-tzdata",
  "iana-time-zone",
+ "js-sys",
  "num-traits",
+ "serde",
+ "wasm-bindgen",
  "windows-targets",
 ]
 
@@ -504,6 +507,7 @@ version = "1.3.58"
 dependencies = [
  "anyhow",
  "bcrypt",
+ "chrono",
  "futures-util",
  "poem",
  "poem-openapi",

Cargo.toml

@@ -15,4 +15,5 @@ serde = "1.0.190"
 thiserror = "1.0.50"
 anyhow = "1.0.75"
 serde_json = "1.0.108"
+chrono = { version = "0.4.31", features = ["serde"] }
 

client/src/components/Chat.vue

@@ -52,9 +52,12 @@ onMounted(async () => {
       </div>
         -->
       <div v-for="msg in msgs" class="d-flex text-body-secondary pt-2 px-3 border-bottom">
-        <p class="pb-2 mb-0 small lh-sm">
+        <p class="pb-2 mb-0 small lh-sm word-wrap">
+        <div class="d-flex justify-content-between">
           <strong class="d-block text-gray-dark">{{ msg.username }}</strong>
-          {{ msg.message }}
+          <div>{{ msg.timestamp }}</div>
+        </div>
+        {{ msg.message }}
         </p>
       </div>
       <form onsubmit="event.preventDefault();" class="container-fluid fixed-bottom mb-3">
@@ -68,3 +71,10 @@ onMounted(async () => {
   </main>
 </template>
 
+<style scoped>
+.word-wrap {
+  word-break: break-all;
+  width: 100vw;
+}
+</style>
+

src/main.rs

@@ -1,3 +1,4 @@
+use chrono::{offset::Utc, DateTime};
 use futures_util::{SinkExt, StreamExt};
 use poem::{
     endpoint::StaticFilesEndpoint,
@@ -129,6 +130,7 @@ impl Api {
                                 .send(ChatMsg {
                                     username: name.clone(),
                                     message: text,
+                                    timestamp: Utc::now(),
                                 })
                                 .is_err()
                             {
@@ -255,6 +257,7 @@ impl Api {
 struct ChatMsg {
     username: String,
     message: String,
+    timestamp: DateTime<Utc>,
 }
 
 struct Api {