This article will create a simple Chat application that requires almost no basic knowledge of Node.js or socket.io, making it an ideal choice for all users.

Translation: Mervyn Zhang proofread: Jin Wei

In this paper, the program is slightly changed, all implemented by ES6, while adding some notes. Due to lack of skill, please correct the mistakes in translation.

Here is the translation:

In this tutorial, we’ll create a simple chat application that requires little or no basic knowledge of Node.js or socket.io, making it an ideal choice for all users.

Introduction to the

Writing chat applications has historically been difficult using popular Web application stacks such as LAMP(PHP). It involves polling for changes to the server and logging timestamps, so writing software is much slower.

Sockets provide two-way communication between client and server, and have been the solution for building most real-time chat systems.

This means that the server can push a message to the client. The idea is that every time you send a message, the server will receive it and push it to other connected clients.

Web framework

{"name": "socket-chat-example", "version": "0.0.1", "description": "socket. IO app", "dependencies": {}}Copy the code

NPM install - save [email protected]Copy the code

NPM install –save Express NPM install –save Express

Now that Express is installed, we can create an index.js file to configure our application.

const app = require('express')();
const http = require('http').Server(app);
app.get('/', (req, res) => {
  res.send('
Hello world
');
});
http.listen(3000, () => {
  console.log('listening on *:3000');
});Copy the code

This process is explained by the following steps:

1. Initialize Express as a handler that can be used to provide HTTP services:app(See line 2).
2. Defines a routing handler that is called when visiting the front page of our website.
3. Let the HTTP service listen on port 3000.

If you run Node index.js, you’ll see something like this:

When your browser visits http://localhost:3000:

Note: My repository code listens on port 9000, so you need to visit http://localhost:9000, as follows.

Access to the HTML

So far, we’ve called res.send in index.js and passed an HTML string. But if we put our entire application’s HTML in here, it would look very confusing. Therefore, we create an index.html file and import it.

Let’s refactor our routing handler using sendFile:

app.get('/', (req, res) => {
  res.sendFile(`${__dirname}/index.html`);
});Copy the code

Then populate the index.html with the following:

  
    Socket.IO chat
    
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    
  
  
    
     

    
      Send
    
  
Copy the code

If you restart the process (by clicking Control+C and running Node Index again) and refresh the window, you will see the following page:

Integration of the Socket. IO

npm install --save socket.ioCopy the code

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
app.get('', (req, res) => {
  res.sendfile('index.html');
});
io.on('connection', (socket) => {
  console.log('a user connected');
});
http.listen(3000, () => {
  console.log('listening on *:3000');
});Copy the code

Copy the code

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});Copy the code

Emitting events

The main idea behind socket. IO is that you can accept and send any event and any data inside it that you want. Any object that can be encoded as JSON will do, and binary data is also supported.

When the user types a message and we let the server receive it as a chat message event, the script part of index.html should look like this:

Copy the code

Also in index.js we print out the Chat message event:

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    console.log(`message: ${msg}`);
  });
});Copy the code

The result should be as follows:

radio

io.emit('some event', { for: 'everyone' });Copy the code

io.on('connection', (socket) => {
  socket.broadcast.emit('hi');
});Copy the code

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});
Copy the code

Copy the code

Homework

Here are some ideas for improving the app:

• Broadcast a message to the connected user when someone connects or disconnects;
• Add support for nicknames;
• Don’t send your own message to someone who wants to send it. Instead, as long as he pressesEnterKey to add messages directly;
• Add the user is entering the function;
• Show who is online;
• Add private messages;
• Store messages in a database;
• Share your improvements!

Get this example

$ git clone https://github.com/guille/chat-example.gitCopy the code