nodejs implements single chat function-Front-end Q&A-php.cn

nodejs implements single chat function

WBOY

Release： 2023-05-28 11:01:09

Original

628 people have browsed it

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

Copy after login

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');
});

Copy after login

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');
  });
});

Copy after login

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);
  });
});

Copy after login

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>

Copy after login

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

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

Copy after login

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!