Nodejs combined with Socket.IO to realize websocket instant communication

Nodejs combined with Socket.IO to realize websocket instant communication

Why use websocket

Websocket is a network communication protocol, generally used for real-time communication.

The websocket protocol is similar to the http protocol. The http protocol has a flaw in that it can only be initiated by the client side, and the server side returns the corresponding result based on the request URL and the parameters passed.

Websocket is雙向通信. Once the websocket connection is established, the client can send data to the server, and the server can also actively send data to the client.

Websocket is applicable to scenarios such as web chat rooms, web customer service, and instant messaging scenarios where the front-end and back-end frequently exchange data.

Socket.io

A bidirectional and low-latency websocket communication package with high performance, high reliability and scalability.
(To put it simply, it is to encapsulate and optimize websocket.)

insert image description here

Socket.IO is a library that enables real-time, bidirectional, event-based communication between browsers and servers. It includes:

  • Server
  • Client

insert image description here

Official website
https://socket.io/
Official Documentation
https://socket.io/docs/v4/

Open Source Projects

The following code and time items will be published in the open source project [nodejs-study], welcome to download and study

Effect Preview

After entering node app to run the service, you can access it through http://localhost:3000/. If you see the output listening to port 3000 and the front-end displays hello world, the project has been successfully started.

insert image description here

Front-end page: a chat UI box, including sending and receiving functions http://localhost:3000/test

insert image description here

Background websocket: listening and replying

insert image description here

app.js

First you need to install the express and socket.io libraries

Type npm install express --save or yarn add express

Type npm install socket.io--save or yarn add socket,io

Next, we will monitor the two paths / and /test

  • / Return to hello world
  • /test returns to the html connection page

socket.on ("chat message", callback function)
Indicates starting to monitor the "chat message" channel, as long as the frontend and backend are the same channel.

socket.emit ("chat message", msg.toUpperCase());
Indicates a reply to this "chat message" channel. We will temporarily capitalize the English letters and return it.

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);

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

app.get('/test', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// io.on('connection', (socket) => {
// console.log('a user connected');
// });
//by zhengkai.blog.csdn.net
//Process socket.on information and socket.emit reply information //Here, capitalize the received msg io.on('connection', (socket) => {
    //Socket.io by zhengkai.blog.csdn.net
    socket.on('chat message', (msg) => {
      console.log('received: ' + msg);
      socket.emit("chat message", msg.toUpperCase());
    });
  });
//Listen on port 3000
server.listen(3000, () => {
  console.log('listening on *:3000');
});

index.html

This does some styling, and has the following body content:

  • The ul of message can be used to append li information to display the records of transactions.
  • A form to submit the information to be sent

As for the script part, first use the official socket.io js client to initialize a connection and add a listening event:

  • After entering non-empty content and submitting it, the information is sent to the websocket backend and is also output in the information list
  • After receiving the message, it will be displayed in the message list
<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
      #input:focus { outline: none; }
      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }

      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages > li { padding: 0.5rem 1rem; }
      #messages > li:nth-child(odd) { background: #efefef; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
  </body>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();
    
    var messages = document.getElementById('messages');
    var form = document.getElementById('form');
    var input = document.getElementById('input');

    //Output to screen function addMessage(str){
        const li = document.createElement("li")
        li.innerHTML=str;
        messages.appendChild(li); 
        
    }
    // console.log(form)
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      if (input.value) {
        //Socket.io by zhengkai.blog.csdn.net
        let msg = 'Send message:' + input.value;
        console.log(msg)
        socket.emit('chat message', input.value);
        addMessage(msg);
        //Clear an input box//input.value = '';
      }
    });
    socket.on("chat message", (arg) => {
        let msg = 'Receive message:' + arg;
        console.log(msg); // world
        addMessage(msg);
    }); 
  </script>
  
</html>

This is the end of this article about nodejs combined with Socket.IO to implement websocket instant messaging. For more related node websocket instant messaging content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Nodejs and react to realize the function of simple instant messaging chat room
  • NodeJs implements simple WebSocket instant messaging sample code
  • Method of using MQTT protocol to realize instant messaging and offline push in Node.js
  • Detailed explanation of the instant messaging function implemented by nodejs combined with Socket.IO
  • 4 ways to implement instant messaging with JavaScript

<<:  N ways to cleverly implement adaptive dividers with CSS

>>:  Web Design Tips: Simple Rules for Page Layout

Recommend

The image element img has extra blank space in IE6

When doing DIV+CSS layout of the page, it is very...

Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS

1. Document flow and floating 1. What is document...

Detailed graphic tutorial on installation, startup and basic configuration of MySQL under Windows version

download: Step 1: Open the website (enter the off...

Detailed explanation of using javascript to handle common events

Table of contents 1. Form events 2. Mouse events ...

SQL GROUP BY detailed explanation and simple example

The GROUP BY statement is used in conjunction wit...

Linux server configuration IP whitelist to prevent remote login and port exposure

Preface The server used by the blogger was purcha...

Solution to MySql Error 1698 (28000)

1. Problem description: MysqlERROR1698 (28000) so...

A brief discussion on MySQL large table optimization solution

background The amount of new data in the business...

TypeScript installation and use and basic data types

The first step is to install TypeScript globally ...

Nginx URL rewriting mechanism principle and usage examples

URL rewriting helps determine the preferred domai...

Use CSS to achieve 3D convex and concave effects on images (convex out of the frame or concave in the frame)

Ⅰ. Problem description: Use CSS to achieve 3D con...

How to quickly deploy an Elasticsearch cluster using docker

This article will use Docker containers (orchestr...

Detailed explanation of nodejs built-in modules

Table of contents Overview 1. Path module 2. Unti...

DIV and image horizontal and vertical centering compatible with multiple browsers

The first type: full CSS control, layer floating ...

A brief discussion on the implementation of MySQL's limit paging optimization solution

Mysql limit paging statement usage Compared with ...