Practical application of WebSocket technology in online chat rooms-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

Practical application of WebSocket technology in online chat rooms

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 15, 2023 am 11:37 AM

online chat roomPractical applicationPractical application websocket

Practical application of WebSocket technology in online chat rooms

With the rapid development of the Internet, people's demand for instant messaging is getting higher and higher. Although the traditional HTTP protocol can transmit data, it needs to initiate a request every time, which is inefficient. In order to solve this problem, WebSocket technology came into being. WebSocket technology can establish a persistent, two-way communication channel between the browser and the server, greatly improving the efficiency and real-time performance of data transmission, so it has been widely used in online chat rooms.

Advantages of WebSocket:

Lower latency: Compared with the traditional HTTP request-response model, WebSocket technology can establish a persistent connection, achieve instant communication, and can achieve faster communication. Send chat content to other users.
Less network traffic: WebSocket technology transfers data multiple times by establishing a connection instead of sending an HTTP request each time. This reduces the number of packets and reduces network traffic.
Better compatibility: The standard of WebSocket technology has matured and is widely supported by modern browsers without the need for additional plug-ins or libraries.

The following takes an online chat room as an example to introduce the practical application of WebSocket technology.

First, on the server side, we use Node.js as the backend language. The advantage of using Node.js is that you can use JavaScript language for development, which facilitates interaction with the front end.

//引入WebSocket模块
const WebSocket = require('ws');

//创建WebSocket服务器
const wss = new WebSocket.Server({ port: 3000 });

//保存连接的用户
const users = new Set();

//WebSocket服务端启动成功后的回调函数
wss.on('listening', () => {
  console.log('WebSocket server is running on port 3000.');
});

//处理WebSocket连接
wss.on('connection', (ws) => {
  //将新用户添加到用户列表中
  users.add(ws);

  //监听消息事件
  ws.on('message', (message) => {
    //将消息发送给其他用户
    users.forEach((user) => {
      if (user !== ws) {
        user.send(message);
      }
    });
  });

  //监听连接关闭事件
  ws.on('close', () => {
    //将用户从用户列表中移除
    users.delete(ws);
  });
});

On the client side, we use HTML, CSS, and JavaScript to implement the user interface and communicate with the server.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>在线聊天室</title>
  <style>
    #chat { width: 400px; height: 300px; margin-bottom: 10px; overflow-y: auto; }
  </style>
</head>
<body>
  <div id="chat"></div>
  <input type="text" id="message" placeholder="请输入消息">
  <button id="send">发送</button>

  <script>
    const chat = document.getElementById('chat');
    const messageInput = document.getElementById('message');
    const sendButton = document.getElementById('send');

    //创建WebSocket连接
    const ws = new WebSocket('ws://localhost:3000');

    //监听WebSocket连接成功事件
    ws.addEventListener('open', () => {
      console.log('WebSocket connection is established.');
    });

    //监听WebSocket接收到消息事件
    ws.addEventListener('message', (event) => {
      const message = event.data;
      const messageNode = document.createElement('p');
      messageNode.textContent = message;
      chat.appendChild(messageNode);
    });

    //发送消息
    sendButton.addEventListener('click', () => {
      const message = messageInput.value;
      ws.send(message);
      messageInput.value = '';
    });
  </script>
</body>
</html>

The above code implements a simple online chat room. When a user accesses a page through a browser, a WebSocket connection is established and the message entered by the user is sent to the server. The server will forward the received messages to other connected users, thus realizing the real-time chat function.

Through WebSocket technology, the practical application of online chat rooms is realized. WebSocket's two-way communication can effectively reduce time delay and network traffic, providing a better user experience. As WebSocket technology continues to develop and improve, I believe it will be applied and promoted in more fields.

The above is the detailed content of Practical application of WebSocket technology in online chat rooms. 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

如何使用Go语言和Redis实现在线聊天室Oct 27, 2023 pm 03:28 PM

如何使用Go语言和Redis实现在线聊天室引言：随着互联网的迅速发展，社交网络已经成为人们日常生活中不可或缺的一部分。在线聊天室作为社交网络中的一个重要组成部分，具有便捷、实时、交互性强等特点受到人们的欢迎。本文以Go语言和Redis为基础，介绍如何使用这两个工具实现一个简单的在线聊天室。一、Go语言介绍：Go语言是一门开源的、面向现代化操作系统的系统编程语

如何使用PHP实现一个简单的在线聊天室Sep 25, 2023 am 09:57 AM

如何使用PHP实现一个简单的在线聊天室引言：随着互联网的发展，人们越来越多地依赖于在线聊天工具与他人进行沟通。在我们日常生活中，我们可能经常使用在线聊天工具与朋友、家人或同事交流。本文将介绍如何使用PHP实现一个简单的在线聊天室，并提供具体的代码示例。一、创建数据库和表首先，在本地或远程服务器上创建一个数据库，并在该数据库下面创建一个名为"chatroom"

WebSocket协议在在线投票应用中的实际应用经验分享Oct 15, 2023 pm 12:28 PM

WebSocket协议在在线投票应用中的实际应用经验分享引言：随着互联网的普及和技术的不断进步，越来越多的应用程序在实现实时通信和交互功能时选择了WebSocket协议。本文将以在线投票应用为例，介绍WebSocket协议在该应用中的实际应用经验，并提供具体的代码示例。一、背景介绍在线投票应用是一个典型的需要实时通信功能的应用程序。传统的HTTP协议在实现实

深入掌握struts框架的工作原理与实践运用Jan 04, 2024 am 10:26 AM

理解struts框架的内部机制及实际应用，需要具体代码示例引言：Struts是一个基于MVC架构的Web应用开发框架，它提供了一套丰富的类库和API，帮助开发者有效地组织和管理Web应用程序。理解Struts框架的内部机制和实际应用，将有助于我们更好地使用这个框架开发功能强大、稳定可靠的Web应用程序。本文将详细介绍Struts的内部机制，并给出一些实际应用

Go语言函数的递归调用与实际应用场景Mar 22, 2024 pm 09:42 PM

标题：Go语言函数的递归调用与实际应用场景在Go语言中，函数的递归调用是一种强大的编程技巧，可以简洁地解决某些复杂的问题。递归调用指的是函数直接或间接地调用自身，通过将一个大问题拆分成多个相似的小问题，递归调用可以帮助我们更好地理解、设计和实现算法。1.什么是递归调用当一个函数在执行过程中调用自己，这种调用方式就被称为递归调用。递归函数在实现时需要满足两个

使用PyCharm的批量缩进功能提高代码规范性Dec 30, 2023 am 11:38 AM

代码规范利器：PyCharm批量缩进功能的实际应用引言：在软件开发领域，代码规范是非常重要的一环。良好的代码规范不仅能提高代码的可读性和可维护性，还能减少潜在的bug。然而，在编写代码的过程中，经常会出现缩进不一致的问题，不仅影响代码的美观，还可能导致语法错误。本文将介绍PyCharm这一优秀的Python开发工具中的批量缩进功能，以及其在实际开发中的应用。

常见Web标准及其实际案例解析Jan 13, 2024 pm 03:50 PM

了解常见的Web标准及其实际应用案例在当今数字化时代，万维网已成为人们获取信息、进行交流和开展业务活动的重要平台。而Web标准则是保证网页在不同浏览器上正常显示和稳定运行的基础。本文将介绍一些常见的Web标准，并通过实际应用案例来说明它们的重要性。首先，HTML（超文本标记语言）是Web标准中最基础的一部分，用于描述网页的结构和内容。HTML使用标签来定义不

PHP переменные в действии: 10 реальных примеров использованияFeb 19, 2024 pm 03:00 PM

PHP变量存储程序运行期间的值，对于构建动态且交互式的WEB应用程序至关重要。本文将深入探讨php变量，并通过10个真实的示例展示它们的实际应用。1.存储用户输入$username=$_POST["username"];$passWord=$_POST["password"];此示例从表单提交中提取用户名和密码，并将其存储在变量中以供进一步处理。2.设置配置值$database_host="localhost";$database_username="username";$database_pa

See all articles