Home > Article > Backend Development > Application case analysis of WebSocket and real-time communication

Application case analysis of WebSocket and real-time communication

王林Original: 2023-10-15 09:42:11579browse

With the development of the Internet and the advancement of technology, real-time communication is becoming more and more important in various applications. The traditional HTTP-based request-response model often cannot meet the needs of real-time communication, so WebSocket emerged as a new protocol. The WebSocket protocol is based on TCP and allows the establishment of a persistent connection between the client and the server, achieving full-duplex real-time communication.

This article will analyze WebSocket application cases through a simple chat room application and provide corresponding code examples.

Project Overview
We want to implement a simple chat room application where users can send messages in the web page and communicate with other online users in real time. The application will use WebSocket protocol for real-time communication.
Technology Selection
We chose to use Node.js as the back-end platform and Socket.io as the WebSocket library. Socket.io is an open source real-time application framework that encapsulates the WebSocket protocol and provides a simple and easy-to-use API.
Server-side implementation
First, we need to create a server-side Socket.io instance and listen to the specified port.

// 引入依赖
const app = require('http').createServer();
const io = require('socket.io')(app);

// 监听指定端口
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

// 处理连接事件
io.on('connection', (socket) => {
  console.log(`User connected: ${socket.id}`);

  // 处理接收到的消息
  socket.on('message', (message) => {
    console.log(`Received message: ${message}`);
    // 广播消息给所有连接的客户端
    io.emit('message', message);
  });

  // 处理断开连接事件
  socket.on('disconnect', () => {
    console.log(`User disconnected: ${socket.id}`);
  });
});

Client implementation
In the web page, we need to introduce the Socket.io client library and connect to the server.

<!DOCTYPE html>
<html>
<head>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // 连接到服务器
    const socket = io('http://localhost:3000');

    // 处理接收到的消息
    socket.on('message', (message) => {
      console.log(`Received message: ${message}`);
      // 更新页面显示
      document.getElementById('messages').innerHTML += `<li>${message}</li>`;
    });

    // 发送消息
    function sendMessage() {
      const input = document.getElementById('input');
      const message = input.value;
      // 发送消息给服务器
      socket.emit('message', message);
      input.value = '';
    }
  </script>
</head>
<body>
  <ul id="messages"></ul>
  <input type="text" id="input">
  <button onclick="sendMessage()">发送</button>
</body>
</html>

In the above code, socket.emit is used to send messages to the server, socket.on is used to receive messages from the server and update them The page is displayed.

Run the project
Enter the project directory on the command line and run the following command to start the server:

node server.js

Then, open http in the browser ://localhost:3000 to enter the chat room application. Multiple users can send messages on the web page at the same time to achieve real-time communication.

Through the above cases, we can see the application advantages of WebSocket in real-time communication. Compared with the traditional HTTP request-response model, WebSocket can establish a persistent connection and achieve real-time two-way communication, which greatly improves the user experience.

Summary
This article introduces the application of WebSocket and real-time communication through a simple chat room application case. By using Node.js and Socket.io, we can easily build real-time communication applications to provide users with a better interactive experience. I hope this article will be helpful in understanding the application of WebSocket and how to achieve real-time communication.

Reference materials:

Socket.io official documentation: https://socket.io/docs/

The above is the detailed content of Application case analysis of WebSocket and real-time communication. For more information, please follow other related articles on the PHP Chinese website!

封装 JS http https websocket

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：Swoole and Workerman's performance monitoring and tuning methods for PHP and MySQLNext article：Swoole and Workerman's performance monitoring and tuning methods for PHP and MySQL

See more

Application case analysis of WebSocket and real-time communication

Related articles