chat con vuejs v1

jpastorm · Jul 6, 2020 · 0a25889 · 0a25889
commit 0a25889
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 0 deletions.
diff --git a/assets/index.html b/assets/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
+    <title>Chat</title>
+</head>
+<body>
+
+    <div id="app">
+        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+            <a class="navbar-brand" href="#">Chat</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>      
+            <div class="collapse navbar-collapse" id="navbarColor01">
+                <ul class="navbar-nav mr-auto">
+                    <li class="nav-item active">
+                        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">About me<span class="sr-only">(current)</span></a>
+                    </li>
+                </div>
+            </nav>
+            <div class="card mb-5">
+                <div class="card-header text-center">
+                    Todos los mensajes de la sala
+                </div>
+                <div class="card-body">
+                        <div v-if="Nombre.length==0" class="text-center"><h5 class="card-title">Ingresar a la sala</h5>
+                            <p class="card-text">Para entrar a la sala necesita un nombre de usuario.</p>
+                            <button  class="btn btn-primary" @click="setNombre">Ingresar</button></div>
+                        <div v-else>
+                        <ul class="list-group" v-for="msg in mensajes" >
+                            <li class="list-group-item">{{msg.usuario}}: {{msg.text}}</li>                            
+                        </ul>
+
+                    <div class="card-footer text-muted" >
+                        <input type="text" class="form-control" placeholder="Escribe algo.." v-model="msg">
+                        <button class="btn btn-primary btn-block mt-2" @click="sendMessage">Enviar</button>
+                    </div>
+                </div>
+                </div>
+                </div>
+            </div>
+            <footer class="text-center">
+                <h4><a href="jpastorm.github.io">&copy; 2020 jpastorm.github.io</a></h4>
+            </footer>
+            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+            <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
+            <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+            <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+            <script>
+                const socket = io();
+                var app= new Vue({
+                    el: "#app",
+                    data:{
+                        mensajes:[],
+                        Nombre:"",
+                        msg:""
+                    },
+                    methods:{
+                        setNombre:function(){
+                            swal("Ingresa un nombre:", {
+                                content: "input",
+                            })
+                            .then((value) => {
+                                swal(`Tu nombre es : ${value}`);
+                                this.Nombre=value;
+                                console.log(this.Nombre);
+                            });
+                        },
+                        sendMessage() {
+                            const someData = {
+                                msg:this.msg,
+                                Nombre:this.Nombre																				
+                            }
+                            socket.emit("reply", JSON.stringify(someData), data=>{
+                                console.log(data);
+                            })
+                             this.msg = "";
+                        }
+                    },
+                    created:function(){
+                        socket.on('reply', (msg)=>{
+                            var msg=JSON.parse(msg);
+                            console.log(msg.msg);
+                            console.log(msg.Nombre);
+                            this.mensajes.push({
+                                text: msg.msg,
+                                usuario:msg.Nombre,
+                                fecha: new Date().toLocaleString()
+                            });
+                        })
+                    }
+                })
+            </script>
+        </body>
+        </html>
+
diff --git a/main b/main
diff --git a/main.go b/main.go
@@ -0,0 +1,54 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"log"
+	"net/http"
+
+	socketio "github.com/googollee/go-socket.io"
+)
+
+type Mensaje struct {
+	Nombre string
+	Msg    string
+}
+
+func main() {
+	server, err := socketio.NewServer(nil)
+	if err != nil {
+		log.Fatal(err)
+	}
+	var broadcast = socketio.NewBroadcast()
+	server.OnConnect("/", func(s socketio.Conn) error {
+		s.SetContext("")
+		fmt.Println("connected:", s.ID())
+		broadcast.Join("chat_room", s)
+		return nil
+	})
+	server.OnEvent("/", "reply", func(s socketio.Conn, msg string) {
+		fmt.Println("reply:", msg)
+		var mensaje = []byte(msg)
+		//s.Emit("reply", msg)
+		var obj Mensaje
+		err := json.Unmarshal(mensaje, &obj)
+		if err != nil {
+			log.Println(err)
+		}
+		fmt.Println("Nombre:" + obj.Nombre + " mensaje: " + obj.Msg)
+		broadcast.Send("chat_room", "reply", msg, func(so socketio.Broadcast, data string) {
+			log.Println("Client ACK with data: ", data)
+		})
+
+	})
+	server.OnDisconnect("/", func(s socketio.Conn, reason string) {
+		fmt.Println("closed", reason)
+	})
+	go server.Serve()
+	defer server.Close()
+	http.Handle("/socket.io/", server)
+	http.Handle("/", http.FileServer(http.Dir("./assets")))
+	log.Println("Serving at localhost:8000...")
+	log.Fatal(http.ListenAndServe(":8000", nil))
+
+}