Forem: Jacobkim

'res.json()'s are different between a backend server and a frontend server

Jacobkim — Wed, 24 Feb 2021 16:32:10 +0000

While building web servers(Backend and frontend), I found information that responses between backend and frontend are different. As a backend server a response has information for backend server(Like server, socket, session, header and etc...) but as a frontend server a response has information for the frontend server(like header options, status, and etc...).

At a frontend server fetch loads json file like below:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

//answer: Object { userId: 1, id: 1, title: "delectus aut autem", completed: false }

Let me make a browser console response for fetch:

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(res => console.log(res))

And console logged below:

Response

body: ReadableStream { locked: false }

bodyUsed: false

headers: Headers {  }

ok: true

redirected: false

status: 200

statusText: "OK"

type: "cors"

url: "https://jsonplaceholder.typicode.com/todos/1"

<prototype>: ResponsePrototype { clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), … }

A response has such information on a browser.

On express.js server a response sends JSON like below:

let data = {data : 'example'}
app.get('/home', (req, res) => {
  res.json(data);
//{data : 'example'}
})

Let me make the server console a response:

app.get('/home', (req, res) => {
  console.log(req);
  res.end();
})

And I got long logs like below:

_readableState: ...
...
<ref *2> IncomingMessage {
  _readableState: ReadableState {
    objectMode: false,
    highWaterMark: 16384,
    buffer: BufferList { head: null, tail: null, length: 0 },
    length: 0,
    pipes: [],
    flowing: null,
    ended: false,
    endEmitted: false,
    reading: false,
    sync: true,
    needReadable: false,
    emittedReadable: false,
    readableListening: false,
    resumeScheduled: false,
    errorEmitted: false,
    emitClose: true,
    autoDestroy: false,
    destroyed: false,
    errored: null,
    closed: false,
    closeEmitted: false,
    defaultEncoding: 'utf8',
    awaitDrainWriters: null,
    multiAwaitDrain: false,
    readingMore: true,
    decoder: null,
    encoding: null,
    [Symbol(kPaused)]: null
  },
  _events: [Object: null prototype] { end: [Function: clearRequestTimeout] },
  _eventsCount: 1,
  _maxListeners: undefined,
  socket: <ref *1> Socket {
    connecting: false,
    _hadError: false,
    _parent: null,
    _host: null,
    _readableState: ReadableState {
      objectMode: false,
      highWaterMark: 16384,
      buffer: BufferList { head: null, tail: null, length: 0 },
      length: 0,
      pipes: [],
      flowing: true,
      ended: false,
      endEmitted: false,
      reading: true,
      sync: false,
      needReadable: true,
      emittedReadable: false,
      readableListening: false,
      resumeScheduled: false,
      errorEmitted: false,
      emitClose: false,
      autoDestroy: false,
      destroyed: false,
      errored: null,
      closed: false,
      closeEmitted: false,
      defaultEncoding: 'utf8',
      awaitDrainWriters: null,
      multiAwaitDrain: false,
      readingMore: false,
      decoder: null,
      encoding: null,
      [Symbol(kPaused)]: false
    },
...

A response on a backend server has other messages now like a frontend server.

So res.json() looks same but has a different meaning between a backend server and a frontend server.

For example this fetch doesn't work on a frontend server:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => {response.json()})
  .then(json => console.log(json))
//undefined

But this works:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

What's different as ES6 code? The first one doesn't return response.json() but the other does return because arrow function automatically returns without bracket. If like this:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => {return response.json()})
  .then(json => console.log(json))

//answer: Object { userId: 1, id: 1, title: "delectus aut autem", completed: false }

then it will show the JSON.

But we use res.json() without return on express.js like below:

let data = {data : 'example'}
app.get('/home', (req, res) => {
  res.json(data); //without return
})

So res.json() for a frontend server shouldn't be used as a backend server. For fullstack developers these should be aware as different meanings.

Hosting web server at cafe24(Getting a job in Korea)

Jacobkim — Wed, 08 Apr 2020 09:39:11 +0000

Liquid syntax error: 'raw' tag was never closed

Running node server with mysql on my smartphone

Jacobkim — Thu, 02 Apr 2020 01:17:51 +0000

Before you root your phone...

On this post I wanna show how to run node server with mysql on a galaxy smartphone. It seems a smartphone could be used as a linux system with wifi. But it could damage your software in your smartphone so I suggest you don't try to root your phone.

Rooting a galaxy smartphone

To run mysql on a smartphone accessing root is needed. Most of smartphone brands choose one OS between iOS and Android. And mysql servers often run on linux which use kernel as Android and iOS use too! But root permission is officialy blocked on mobile OS, which changing to rooted kernel is needed. Since kernel is forced to rooted one any damage on mobile system isn't supported by A/S.

Odin is changing kernel on a smartphone connected to a desktop. I downloaded one click root so it wasn't that hard to root. I followed this guide : https://www.oneclickroot.com/root/alps-qmobile-a550-alps-jb5-mp-v1-6-4-2-2/

Download the zip file.
Unzip the file in wherever you want.
Download Samsung USB Driver at here: https://developer.samsung.com/mobile/android-usb-driver.html
Turning on USB Debugging on your smartphone.
Turn off your smartphone.
Plug off usb connector form your smartphone.
Start with download mode of your smartphone(by pushing for seconds volume down button + home button + power button).
After your smartphone asking download mode, pushing volume up button.
Connect your smartphone to your desktop with usb connector.
Execute odin file and kernel is changed.

Linux terminal on your smartphone

After your smartphone is rebooted now can you access root permission! Though you could get breaked in from hackers, you can use yours like linux OS. I hope you use dark power with a care! :D Let's download some applications :
Termux: termux.com/
https://play.google.com/store/apps/details?id=com.joeykrim.rootcheck
Root Checker: https://play.google.com/store/apps/details?id=com.joeykrim.rootcheck

Termux can make you run terminal and command on your smartphone as linux users command. We will install packages for node modules.
After running Termux you can see terminal on a smartphone. You can command as you do on linux terminal but accessing root have been blocked by mobile OS kernel.

Adding sudo command in Termux

After rooting your phone and entering Termux we need add sudo command which haven't been loaded on Termux from 'termux-sudo' git. We are at $HOME directory if not, type cd $HOME. You can check where you are in Termux by typing pwd command. First, type apt upgrade && apt update and install git for git clone to type pkg install git. Now we extracting termux-sudo typing git clone https://gitlab.com/st42/termux-sudo.git We need dependency so type pkg install ncurses-utils. After extraction is finished type cd termux-sudo. Now we are at 'termux-sudo' directory. Type below,

cat sudo > /data/data/com.termux/files/usr/bin/sudo
chmod 700 /data/data/com.termux/files/usr/bin/sudo

termux-sudo git page for extraction is here:
https://gitlab.com/st42/termux-sudo

Install node.js & vim

We will run node server so we install node package manager. Type pkg install nodejs. Also type pkg install vim to edit scripts. If we don't copy&paste .js files from our desktop, we should be used to scripts on black screen without a mouse!

Make your termux save your files in smartphone storage

Before make webserver we should make Termux save files in smartphone storage. Termux couldn't go out of limited path so couldn't access directories in SD card to bring your file into. First, we go to 'Settings>Apps>Termux>Permissions>Storage' on the smartphone and set to true. Type termux-setup-storage and cd ~/storage/downloads on your Termux. Now you can copy&paste your files from your desktop to your phone with USB connect in downloads folder. Let's check your path with typing pwd.

Install npm packages

So now let's try to make test webserver on Termux. Type mkdir nodeservertest and cd nodeservertest to run website from our directory. Now you have directory 'nodeservertest'! In this directory, node modules and running script will be saved.

To write script we will write on desktop. Copy this on your desktop and save as 'web.js':

/// web.js
const express = require('express')

const app = express();

const port = 3000;

app.get('/', (req, res) => {
    res.send('Hello!');
})

app.listen(port, console.log(`Server is connected :  http://localhost:${port}/`));
~~~

Now connect your smartphone to your desktop with USB connect. Open your folder and copy 'web.js' and paste in 'yoursmartphone/Download/nodeservertest'.

We need module runner. Type `npm init -y`. Type `npm install express mysql`. When running web server, Module 'express' can make you run nodejs webserver without 'http' module. With module 'mysql' you can use data by connecting my sql server from nodejs server. 

Now we run web.js file at '~/nodeservertest/. Type 'node web.js'. Enter localhost:3000/ on your browser. You can see message 'Hello!' on the web. The web is connecting by asking listen method. 'Hello!' text was sent as responding to server. Responding was possible because you ask server to '/' by asking get method. Basically every http method like listen and get was available after you executing express with constant 'app'.

We gonna install mariadb because mysql server couldn't be installed on Termux. Type `pkg install mariadb`. Mariadb will run mysql server and send data to server from mysql database. 

After installing mysql, we run mysql webserver. First, slide from left to right on your Termux terminal. Then you can see 'NEW SESSION' button. You get new session after pushing the button! Type `mysqld_safe -u root &` on new session. This will make mariadb run on background. And we start mysql by typing `sudo mysql -u root`. Before rooting kernel you couldn't run root command 'sudo'. Now you entered mysql.

For connecting to server rightly, should we change password. Type `SET PASSWORD FOR 'root'@'localhost' = PASSWORD('yourpassword');` on mysql session. Type,

CREATE DATABASE 'node';

USE node

CREATE TABLE test
(id int(11) PRIMARY KEY NOT NULL AUTO INCREMENT,
name varchar(50) NOT NULL,
email varchar(255) NOT NULL);

SET INTO test VALUES
(1, 'test', 'test@test.com');


After running mysql server on second session, can we send data from database to server by writing some scripts to execute connecting. Let's add more on web.js. Put,{% raw %}

/// Add this scripts into web.js file
const mysql = require('mysql')

const con = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'yourpassword',
database: 'node'
});

app.get('/', (err, result) => {
con.query('SELECT * FROM test', (req, res) => {
result.json(res);
});
});


Now, your web.js file looks like this,{% raw %}

/// web.js
const express = require('express')
const mysql = require('mysql')

const app = express();

const port = 3000;

const con = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'yourpassword',
database: 'node'
});

app.get('/', (err, result) => {
con.query('SELECT * FROM test', (req, res) => {
result.json(res);
});
});

app.listen(port, console.log(Server is connected : http://localhost:${port}/));


So we command {% raw %}`node web.js` on first session and enter 'localhost:3000/' on the browser. Now you will see json on the browser!