The first thing I do is to review the content of this week. It is quite hard for me to get all the terminology at once especially when I have to install different plugins or modules at the same time.
Part 1: Code Debugging
1. Messages from other clients display on the screen but the sender’s message does not show on the screen
sever.js Line 39socket.broadcast.emit('chatmessage', data);
This sends the message to all clients except the sender according to https://socket.io/docs/emit-cheatsheet/
socket.emit('chatmessage', data);
This will send the message to all the clients
2. Any message sent by the client is always attached “0” after
in chat.htmldocument.getElementById('messages').innerHTML = "" + data + "" + document.getElementById('messages').innerHTML;
Solved by deleting the second “”document.getElementById('messages').innerHTML = "" + data + document.getElementById('messages').innerHTML;
Part 2: Extend the Chat application
Goal: we expect to create a meme-chat platform, which allows multiple users to communicate with memes by simply inputting any link of the meme images they searched online.
A screenshot from our memechat playground:
thememechat.html
<html>
<head>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Share+Tech&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect();
socket.on('connect', function () {
console.log("Connected");
});
// Receive from any event
// receive messages and put them
socket.on('chatmessage', function (data) {
console.log(data);
var image = '<p><img src="' + "" + data + '" style="max-width: 300px; height: auto;"></p>';
// append the image to the web body
document.getElementById("images").innerHTML = document.getElementById("images").innerHTML + image
});
// sent image url to server (event trigger)
var showImage = function (message) {
console.log("message: " + message);
socket.emit("chatmessage", message);
};
</script>
</head>
<body>
<h1>The 2058 Meme Chat Room</h1>
<h3>Welcome to a future world in which we've learned how to communicate only through MEMES 💗 </h3>
<img src="brainmeme.png" alt="brainmeme">
<h4>Instructions:</h4>
<ul>
<li>Let's try to create a conversation only with memes! No text allowed! </li>
<li>Right click on a web-based meme, copy the "Image Address", paste it to the chat and click
"send!"</li>
<li>Try to imagine a real conversation flow responding to the last meme. </li>
<li>Don't push yourself too hard, it doesn't need to make too much sense 😜 </li>
</ul>
<img src="tomeme.png" alt="tomeme">
<hr>
<div>
<div align="center">
<div id="images"></div>
<input type="url" id="message" name="message">
<input type="button" value="send!" onclick="showImage(document.getElementById('message').value);">
</div>
</body>
</html>server.js
// Express is a node module for building HTTP servers
var express = require('express');
var app = express();
// read files
var fs = require('fs');
// Tell Express to look in the "public" folder for any files first
app.use(express.static('public'));
// If the user just goes to the "route" / then run this function
app.get('/', function (req, res) {
res.send('Hello World!')
});
// Here is the actual HTTP server
var http = require('http');
// We pass in the Express object
var httpServer = http.createServer(app);
// Listen on port 80
httpServer.listen(80);
// WebSocket Portion
// WebSockets work with the HTTP server
var io = require('socket.io').listen(httpServer);
// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
// We are given a websocket object in our function
function (socket) {
console.log("We have a new client: " + socket.id);
// When this user emits, client side: socket.emit('otherevent',some data);
socket.on('chatmessage', function(data) {
// Data comes in as whatever was sent, including objects
console.log("Received: 'chatmessage' " + data);
// Send it to all of the clients
// socket.broadcast.emit('chatmessage', data);
io.emit('chatmessage', data);
});
socket.on('disconnect', function() {
console.log("Client has disconnected " + socket.id);
});
}
);
Debug journey:
The most difficult part for me is to figure out how to take input in text, url, or any other form from users to eventually display images on the browser.
<input type=“image”> elements do not accept value attributes, therefore the input type can not be assigned to the “image” type. I replace type from “image” to “url”, which can be used as “src” attribute to specify the path to the image in a <img> tag in HTML. I made some typos such as putting “scr” instead of “src” in <img> tag. By using the following code, I was able to append the image to the browser.
document.getElementById("images").innerHTML = document.getElementById("images").innerHTML + imageShout out to Fernando’s fantastic work on web style design and great thanks to Shawn! We finally make this fun meme communication platform work! 🎉