Home >Web Front-end >Front-end Q&A >nodejs implements single chat function

nodejs implements single chat function

WBOYOriginal: 2023-05-28 11:01:09656browse

Node.js implements single chat function

Node.js is a JavaScript running environment based on Chrome's V8 engine, which allows JavaScript to run on the server side. Using Node.js, we can easily build high-performance, scalable web applications.

In this article, we will use Node.js to implement a simple single chat function, that is, a real-time chat between two users.

Tools and technologies needed:

Node.js
Express Framework
Socket.IO

Create Project

First, we need to create a new Node.js project. You can use the npm init command to initialize the project, or use any other way to create the project folder.

Installing dependencies

Next, we need to install the Express and Socket.IO libraries. Open a command line in the project folder and enter the following command:

npm install express socket.io --save

This will install the Express and Socket.IO libraries and add them to the package.json file.

Create Server

In the project folder, create a file called server.js, this is our main server file. Add the following code:

const express = require('express');
const app = express();

const server = app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

This will create an Express application and bind it to port 3000. Now, we can test that the server is running properly by opening a browser and visiting http://localhost:3000. If everything is fine, you should see a "Cannot GET /" message. This is because we haven't added any routes to the application.

Create a chat room

Now, we need to create a chat room to implement real-time chat function between two different users. For this, we can use the Socket.IO library to handle real-time events and communication.

First, we need to add the following code to the server.js file:

const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

This will create a Socket.IO instance and bind it to the existing HTTP server. When there is a new connection, the callback function will output an 'A user connected' message. When the connection is disconnected, the callback function outputs a 'A user disconnected' message.

Now we can add the ability to send and receive messages to the chat room. For this, we can use the emit() method and on() method of Socket.IO.

Add the following code in the server.js file:

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

This will allow users to send messages and broadcast the messages to all connected clients.

Create client

Now, we need to use a simple HTML and JavaScript page to connect to the Socket.IO server and implement the function of sending and receiving messages. In the project folder, create a new file called index.html and add the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Node.js Chat</title>
</head>
<body>
  <ul id="messages"></ul>
  <form id="message-form">
    <input type="text" id="input-message" autocomplete="off" />
    <button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(function () {
      const socket = io();
      $('#message-form').submit(function(e) {
        e.preventDefault(); // prevents page reloading
        const message = $('#input-message').val();
        socket.emit('chat message', message);
        $('#input-message').val('');
        return false;
      });
      socket.on('chat message', function(msg) {
        $('#messages').append($('<li>').text(msg));
      });
    });
  </script>
</body>
</html>

In this HTML file, we have used the jQuery library to simplify DOM manipulation. It contains an input box and a "Send" button, as well as an ff6d136ddc5fdfeffaf53ff6ee95f185 element to display all messages.

In the JavaScript part, we used the client-side library of Socket.IO to create a Socket.IO instance connected to the server and send a message to the server after the user submits the form. When the client receives a new message from the server, it adds a new list item to the page.

Start the application

Now, we can enter the following command in the command line to launch the application:

node server.js

Next, open the web browser and visit http://localhost:3000. You should see a simple chat interface. Open another browser window, or another browser tab on the same computer, to start chatting.

Summary

In this article, we built a real-time single chat application using Node.js and the Socket.IO library. This application allows users to send and receive messages and uses the Socket.IO library to handle all real-time communications. Although this application is relatively simple, it demonstrates the basic principles of how to build real-time web applications using Node.js and Socket.IO.

The above is the detailed content of nodejs implements single chat function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery traverse array deleteNext article：jquery traverse array delete

See more

nodejs implements single chat function

Related articles