Chat/index.html at master · Ste-Mar/Chat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<title>Chat 💻</title>
		<link
			rel="stylesheet"
			href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
			integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
			crossorigin="anonymous"
		/>

		<!--Eliminado slim e integrity para que funcione-->
		<script
			src="https://code.jquery.com/jquery-3.5.1.min.js"
			crossorigin="anonymous"
		></script>

		<script
			src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
			integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
			crossorigin="anonymous"
		></script>

		<script
			src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
			integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
			crossorigin="anonymous"
		></script>


		<script src="/socket.io/socket.io.js"></script> <!--Con esto funciona "var socket" -->


	</head>

	<body>
		<div class="container">
			<div class="jumbotron form-group">
				<h1 class="display-4">Enviar Mensaje</h1>
				<input id = "nombre" class="form-control mb-3" placeholder="Nombre" />

				<textarea id = "mensaje" class="form-control mb-5" style="resize: none; height:150px" placeholder="Escriba su mensaje"></textarea>

				<button
					id="enviar"
					class="btn btn-primary form-control "
				>
					Enviar
				</button>
			</div>
			<div id="mensajes"></div>
		</div>

		<script>
			var socket = io()

			$(() => {
				$("#enviar").click(() => {
					var mensaje = {nombre: $("#nombre").val(), mensaje: $("#mensaje").val()}
					postMensaje(mensaje)
				});
				getMensajes()
			});

			socket.on('mensaje',addMensaje)

			function addMensaje(mensaje) {
				$("#mensajes").append(`<h4> ${mensaje.nombre} </h4> <p> ${mensaje.mensaje}</p>`);
			}


			// En las líneas punteadas colocar el link brindado por Heroku

			function getMensajes(){
				$.get('....../mensajes',(data)=>{
					data.forEach(addMensaje);
				})

			}

			function postMensaje(mensaje){
				$.post('..../mensajes',mensaje)
			}
		</script>
	</body>
</html>
;