patternjavascriptMinor
Basic chat server and client using WebSocket
Viewed 0 times
chatandclientusingwebsocketserverbasic
Problem
Based on Node.js in Action (Manning Publications) chapter 2 "Building a Multi-room Chat Application", I've taken the model they presented (which is all typical ES5 and jQuery) and completely rewrote it using ES6 and adding a bit of functionality, as well as JSDoc throughout.
While the functionality is mostly identical (I added a bit of new functionality as well), the code is vastly different, and I would like to ask if it could be improved further.
This is what it looks like:
In general, am I using some decent patterns, or are you seeing some trends in my structure, functions and objects that stinks?
I will present both the server (native Node.js along with socket.io for WebSocket) and client-side code (regular ES6 along with jQuery) with some brief explanation.
Server-side
This server is responsible for receiving HTTP requests, serving the requested static assets (or an error), and starting the chat server (presented in next section).
```
"use strict"
const http = require('http')
const fileSystem = require('fs')
const path = require('path')
const mediaType = require("mime")
const chatServer = require('./lib/chat_server')
const fileCache = {}
const HTTP_SERVER_PORT = 3000
const HTTP_SUCCESS = 200
const HTTP_RESOURCE_NOT_FOUND = 404
/**
* Respond when requested resource is OK.
* @param {Object} response - the response from HTTP server
* @param {string} filePath - where the requested file is
* @param {Object} fileContents - the contents of the requested file
*/
const httpSuccess = (response, filePath, fileContents) => {
const contentType = mediaType.lookup(path.basename(filePath))
response.writeHead(HTTP_SUCCESS, { 'Content-Type': contentType})
response.end(fileContents)
}
/**
* Respond when the requested resource is not found.
* @param {Object} response
*/
const httpResourceNotFound = response => {
response.writeHead(HTTP_RESOURCE_NOT_FOUND, { 'Content-Type': 'text/plain' })
response.write('Error ' + HTTP_RESOURCE_NOT_FOUND +
While the functionality is mostly identical (I added a bit of new functionality as well), the code is vastly different, and I would like to ask if it could be improved further.
This is what it looks like:
In general, am I using some decent patterns, or are you seeing some trends in my structure, functions and objects that stinks?
I will present both the server (native Node.js along with socket.io for WebSocket) and client-side code (regular ES6 along with jQuery) with some brief explanation.
Server-side
./server.jsThis server is responsible for receiving HTTP requests, serving the requested static assets (or an error), and starting the chat server (presented in next section).
```
"use strict"
const http = require('http')
const fileSystem = require('fs')
const path = require('path')
const mediaType = require("mime")
const chatServer = require('./lib/chat_server')
const fileCache = {}
const HTTP_SERVER_PORT = 3000
const HTTP_SUCCESS = 200
const HTTP_RESOURCE_NOT_FOUND = 404
/**
* Respond when requested resource is OK.
* @param {Object} response - the response from HTTP server
* @param {string} filePath - where the requested file is
* @param {Object} fileContents - the contents of the requested file
*/
const httpSuccess = (response, filePath, fileContents) => {
const contentType = mediaType.lookup(path.basename(filePath))
response.writeHead(HTTP_SUCCESS, { 'Content-Type': contentType})
response.end(fileContents)
}
/**
* Respond when the requested resource is not found.
* @param {Object} response
*/
const httpResourceNotFound = response => {
response.writeHead(HTTP_RESOURCE_NOT_FOUND, { 'Content-Type': 'text/plain' })
response.write('Error ' + HTTP_RESOURCE_NOT_FOUND +
Solution
In regards to the TODO comment, I would suggest something like this:
This removes the anonymous function declaration and replaces it with an ES6+ arrow function as requested.
const allowClickingRoomNameToJoin = () => {
// TODO look for a better way to scope this with ES6 to eliminate function()
$roomListSideNav.find('div').click(e => {
chat.processCommand('/join ' + $(e.target).text())
$userMessageInputField.focus()
})
}
This removes the anonymous function declaration and replaces it with an ES6+ arrow function as requested.
Context
StackExchange Code Review Q#156861, answer score: 2
Revisions (0)
No revisions yet.