Scribd
Upload
74 views15 pages

MemeChat App: Server and Interface Guide

The document provides code for a meme chat web application. It includes the package.json, server code, and HTML/CSS for the client interface. The server code establishes an Express server and Socket.IO connection for real-time messaging. The HTML includes a form to send messages via Socket.IO events and displays received messages. The updated versions add user presence detection by tracking online users.

Uploaded by

Jose Ponce Lopez
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
74 views15 pages

MemeChat App: Server and Interface Guide

The document provides code for a meme chat web application. It includes the package.json, server code, and HTML/CSS for the client interface. The server code establishes an Express server and Socket.IO connection for real-time messaging. The HTML includes a form to send messages via Socket.IO events and displays received messages. The updated versions add user presence detection by tracking online users.

Uploaded by

Jose Ponce Lopez
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

😀😃😁

Hey guys and girls the updated version you saw in my video is down below keep
scrolling to get it!!​ ​ ✍ ​The blue icon appears when someone is online a bit buggy
but ill get to it. It’s 2019-05-17 and I haven’t gotten to it. LOL

[Link]
{
"name": "memechat",
"version": "1.0.0",
"description": "a fun chatting webpage for my boiizzz in the comments",
"main": "[Link]",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node [Link]"
},
"author": "rhymbil",
"license": "ISC",
"dependencies": {
"balanced-match": "^1.0.0",
"express": "*",
"[Link]": "*"
}
}

MEMESERVER

//How to make a meme server courtesy of RhymBil


var express = require("express");
var app = express();
var server = require("http").createServer(app);
var io = require("[Link]").listen(server);
//setting the required variables

memers = []; //users array


memeConnections = []; //connections array

[Link]([Link] || 2019); // It will run on localhost:(any number)


[Link]("Meme Server Is Up");
[Link]("/", function(req, res){
[Link](__dirname + "/[Link]"); //links to html file CHANGE /[Link] to you
actually html file

});

[Link]("connection", function(socket){
//connection stuff
[Link](socket);
[Link]("Memers connected: %s", [Link]);

// disconnection stuff
[Link]("disconnect", function(data){

[Link]([Link]([Link]), 1); //accessing the array


memers

[Link]([Link](socket),1);
[Link]("Memers disconnected: %s ", [Link]);
});

//send dem meme messages


[Link]("send meme message", function(data){
[Link](data);// shows what the memers typed in console
[Link]("new meme message", {msg: data});
});
});

[Link]

<html>
<head>
<title> MemeChat</title>
<script src="[Link]
<script src="/[Link]/[Link]"></script>
</head>

<body>

<div id="memechat"> <p id="p">Meme Chat </p><p id="pr"> By RhymBil</p></div>


<br>
<br>
<div id="holder">
<form id="messageForm">

<input type="text" id="messageInput" placeholder="Type..."/>


<button type="submit" id="btn" onclick="hidel()"> Send </button>

</form>
<div class="chat" id="chat" style="overflow-y:scroll; height:450px;">

<div id="messageBox">

</div>
</div>
<button type="submit" id="btn1"
onclick="showl()"> Show All </button>

</body>

<script>
$(function(){
var socket = [Link](); //connects to socket
var $messageForm = $("#messageForm"); //ref to the div message form
var $messageInput = $("#messageInput"); //ref to input box with id message
var $chat = $("#chat"); //ref to div chat
var test = $[Link]("");

$[Link](function(e){
[Link]();
[Link]("send meme message", $[Link]());
$[Link]("");

});
[Link]("new meme message", function(data){
if([Link] > 0){
$[Link]('<br>' +'<div id="circle"> ' + '<textarea id="t" readonly>' + [Link] +
'</textarea>'+' </div>' + '<br>' );
}
});

});

showlog = false;
[Link](function() {
if(showlog == false){
var chat = [Link]("chat");
[Link] = [Link];
}
}, 4);

function showl(){
showlog = true;

}
function hidel(){
var chat = [Link]("chat");
[Link] = [Link];
showlog = false;
}

</script>

<style>
body{
background-color:#1abc9c;

}
#p{
margin-top:9px;
}
#pr{
font-size:12px;
margin-top:-34px;
margin-left: 82px;
}
#memechat{
background-color:#e74c3c;
font-family: verdana;
color:white;
font-size: 30px;
text-align:center;
border: 2px solid white;
border-radius:15px;
width:190px;
height:60px;

#btn{
background-color: white;
font-size:15px;
font-family: Verdana;
color:black;
width:56px;
height:51px;
text-align: center;
margin-left:0px;
border-radius:10px;
outline:none;
border: 2px solid #e74c3c;

}
#btn1{
background-color: white;
font-size:15px;
font-family: Verdana;
color:black;
width:100px;
height:40px;
text-align: center;
margin-left:1040px;
margin-top: -40px;
border-radius:10px;
outline:none;
border: 2px solid #e74c3c;

}
#messageInput{
margin-left: 532px;
text-align:center;
border-radius:10px;
outline:none;
shadow:none;
font-size:15px;
font-family: Verdana;
color:black;
width:250px;
height:50px;
}

#t {
text-align:left;
font-size:15px;
font-family: Verdana;
color:black;
border: 2px solid #f1c40f;
margin-top: -5px;
margin-left: 72px;
width:200px;
height:90px;
background-color:white;
border-radius:12px;
resize: none;
outline: none;

}
#chat{

border: 6px solid white;


width:700px;
background-color:#e74c3c;
margin:auto;
border-radius: 10px;
}

::-webkit-scrollbar {
display: none;
}
#circle{
width:50px;
height:50px;
border-radius:100px;
border: 5px solid white;
margin-left:25px;
background-color:#f1c40f;

</style>

</html>

Updated [Link]

<html>
<head>
<title> MemeChat</title>
<script src="[Link]
<script src="/[Link]/[Link]"></script>
</head>

<body>

<div id="memechat"> <p id="p">Meme Chat </p><p id="pr"> By RhymBil</p></div>


<br>
<br>
<div id="holder">
<form id="messageForm">

<input type="text" id="messageInput" placeholder="Type..."/>


<button type="submit" id="btn" onclick="hidel()"> Send </button>

</form>

<div class="chat" id="chat" style="overflow-y:scroll; height:450px;">

<div id="messageBox">

</div>
</div>

</div>
<button type="submit" id="btn1" onclick="showl()"> Show All </button>
<div id="people" style="overflow-y:scroll; height:450px;">
</body>

<script>
var socket = [Link](); //connects to socket

$(function(){
var $people = $("#people");

var $messageForm = $("#messageForm"); //ref to the div message form


var $messageInput = $("#messageInput"); //ref to input box with id message
var $chat = $("#chat"); //ref to div chat

$[Link](function(e){
[Link]();
[Link]("send meme message", $[Link]());
$[Link]("");

});
[Link]("new meme message", function(data){

if([Link] > 0){


$[Link]('<br>' +'<div id="circle"> ' + '<textarea id="t" readonly>' + [Link] +
'</textarea>'+' </div>' + '<br>' );

}
});

[Link]("new memer", function(data){

$[Link]('<br>' +'<div id="circle1"> ' + ' </div>' + '<br>' );

});

[Link]("memer left", function(data){

$("#circle1").remove();

});
});

showlog = false;
[Link](function() {
if(showlog == false){
var chat = [Link]("chat");
[Link] = [Link];

var people = [Link]("people");


[Link] = [Link];
}
}, 4);

function showl(){
showlog = true;

}
function hidel(){
var chat = [Link]("chat");
[Link] = [Link];
var people = [Link]("people");
[Link] = [Link];
showlog = false;
}

</script>

<style>
body{
background-color:#1abc9c;

}
#p{
margin-top:9px;
}
#people{

background-color: #f1c40f;
width:250px;
height:440px;
margin-left:767px;
margin-top:-462px;
border: 6px solid white;

}
#pr{
font-size:12px;
margin-top:-34px;
margin-left: 82px;
}
#memechat{
background-color:#e74c3c;
font-family: verdana;
color:white;
font-size: 30px;
text-align:center;
border: 2px solid white;
border-radius:15px;
width:190px;
height:60px;

#btn{
background-color: white;
font-size:15px;
font-family: Verdana;
color:black;
width:56px;
height:51px;
text-align: center;
margin-left:0px;
border-radius:10px;
outline:none;
border: 2px solid #e74c3c;

}
#btn1{
background-color: white;
font-size:15px;
font-family: Verdana;
color:black;
width:100px;
height:40px;
text-align: center;
margin-left:1040px;
margin-top: -40px;
border-radius:10px;
outline:none;
border: 2px solid #e74c3c;

}
#messageInput{
margin-left: 532px;
text-align:center;
border-radius:10px;
outline:none;
shadow:none;
font-size:15px;
font-family: Verdana;
color:black;
width:250px;
height:50px;
}

#t {
text-align:left;
font-size:15px;
font-family: Verdana;
color:black;
border: 2px solid #f1c40f;
margin-top: -5px;
margin-left: 72px;
width:200px;
height:90px;
background-color:white;
border-radius:12px;
resize: none;
outline: none;

}
#chat{
border: 6px solid white;
width:459px;
background-color:#e74c3c;
margin:auto;
border-radius: 10px;
margin-left:300px;
}

::-webkit-scrollbar {
display: none;
}
#circle{
width:50px;
height:50px;
border-radius:100px;
border: 5px solid white;
margin-left:25px;
background-color:#f1c40f;

}
#circle1{
width:50px;
height:50px;
border-radius:100px;
border: 5px solid white;
margin-left:25px;
background-color:#3498db;

</style>

</html>

Updated [Link]

//How to make a meme server courtesy of RhymBil

var express = require("express");


var app = express();
var server = require("http").createServer(app);
var io = require("[Link]").listen(server);
//setting the required variables

memers = []; //users array


memeConnections = []; //connections array

[Link]([Link] || 2020); // It will run on localhost:(any number)


[Link]("Meme Server Is Up");

[Link]("/", function(req, res){

[Link](__dirname + "/[Link]"); //links to html file CHANGE /[Link]


to you actually html file

});

[Link]("connection", function(socket){
//connection stuff
[Link](socket);
[Link]("new memer"); //checks if anyone is online

[Link]("Memers connected: %s", [Link]);

// disconnection stuff
[Link]("disconnect", function(data){

[Link]([Link]([Link]), 1); //accessing the array


memers

[Link]("memer left"); //checks if memer left

[Link]([Link](socket),1);
[Link]("Memers disconnected: %s ", [Link]);
});

//send dem meme messages


[Link]("send meme message", function(data){
[Link](data);// shows what the memers typed in console
[Link]("new meme message", {msg: data});

});

});

You might also like