Node.js WebSocket CRUD操作 |21xrx.com

Node.js WebSocket CRUD操作

2023-07-08 21:10:25 深夜i -- --

Node js WebSocket CRUD操作

Node.js WebSocket是一种用于实时网络通信的技术，它可以帮助开发者快速构建高度可扩展的Web应用程序。在本文中，我们将介绍Node.js WebSocket如何实现CRUD操作。

首先，让我们了解一下CRUD是什么。CRUD是Create（创建）、Read（读取）、Update（更新）和Delete（删除）的首字母缩写。这四个动作构成了几乎所有数据库应用程序的基础。

一般来说，当你开发一个Web应用程序时，你需要实现CRUD操作来处理用户输入和数据持久化。使用Node.js WebSocket实现CRUD操作也很简单。

首先，我们需要创建一个WebSocket服务器，可以使用socket.io来实现。然后，我们需要定义一些事件，例如创建（create）、读取（read）、更新（update）和删除（delete）事件，用于在WebSocket服务器和客户端之间传输数据。

在创建事件中，服务器会接收来自客户端的请求并将它们添加到数据存储中。在读取事件中，服务器会从数据存储中检索数据并将它们发送给客户端。在更新事件中，服务器将接收来自客户端的更新请求并更新数据存储中的相应条目。在删除事件中，服务器将接收来自客户端的删除请求并从数据存储中删除相应条目。

下面是WebSocket服务器示例代码：


const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 3000;
let data = [];
io.on('connection', (socket) => {
 console.log('a user connected');
 socket.on('create', (item) => {
  data.push(item);
  io.emit('read', data);
 });
 socket.on('read', () => {
  io.emit('read', data);
 });
 socket.on('update', (item) => {
  data.forEach((obj) => {
   if (obj.id === item.id)
    obj.name = item.name;
    obj.description = item.description;
   
  });
  io.emit('read', data);
 });
 socket.on('delete', (id) => {
  data = data.filter((item) => item.id !== id);
  io.emit('read', data);
 });
 socket.on('disconnect', () => {
  console.log('user disconnected');
 });
});
http.listen(port, () => {
 console.log(`listening on *:${port}`);
});

这段代码使用socket.io库来创建WebSocket服务器，并定义了四个事件：create、read、update和delete。

在create事件中，服务器会将从客户端传入的数据存储到data数组中，并使用read事件将更新后的数据发送给所有客户端。

在read事件中，服务器会向所有客户端发送data数组中的数据。

在update事件中，服务器会在data数组中查找id与客户端传入的id匹配的条目，并将其名称和描述更新为客户端传入的新值。

在delete事件中，服务器将从data数组中删除与客户端传入的id匹配的条目，并使用read事件将更新后的数据发送给所有客户端。

最后，在listen函数中定义了服务器端口并启动服务器。

我们已经完成实现Node.js WebSocket CRUD操作的代码，现在我们需要编写客户端代码来处理这些事件。

下面是客户端示例代码：


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>WebSocket Example</title>
 </head>
 <body>
  <ul id="items"></ul>
  <form id="add-item">
   <input type="text" id="name" placeholder="Name" />
   <input type="text" id="description" placeholder="Description" />
   <button type="submit">Add</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script>
   const socket = io();
   const itemList = document.getElementById('items');
   const newItemForm = document.getElementById('add-item');
   const nameInput = document.getElementById('name');
   const descriptionInput = document.getElementById('description');
   function addItemToList(item) {
    const listItem = document.createElement('li');
    const name = document.createElement('h3');
    const description = document.createElement('p');
    const deleteButton = document.createElement('button');
    name.innerText = item.name;
    description.innerText = item.description;
    deleteButton.innerText = 'Delete';
    deleteButton.addEventListener('click', () => {
     socket.emit('delete', item.id);
    });
    listItem.appendChild(name);
    listItem.appendChild(description);
    listItem.appendChild(deleteButton);
    itemList.appendChild(listItem);
   }
   function clearItemList() {
    while (itemList.firstChild) {
     itemList.removeChild(itemList.firstChild);
    }
   }
   socket.on('read', (data) => {
    clearItemList();
    data.forEach((item) => {
     addItemToList(item);
    });
   });
   newItemForm.addEventListener('submit', (event) => {
    event.preventDefault();
    const item = {
     id: Date.now(),
     name: nameInput.value,
     description: descriptionInput.value,
    };
    socket.emit('create', item);
    nameInput.value = '';
    descriptionInput.value = '';
   });
  </script>
 </body>
</html>

这段代码定义了一个包含任务列表、添加任务表单和删除任务按钮的HTML页面，并使用socket.io库将客户端连接到我们之前创建的WebSocket服务器。

我们使用addItemToList函数来将服务器发送的数据添加到任务列表中，并使用clearItemList函数在重新渲染之前清除所有现有项目。在创建新任务时，我们向服务器发送一个新条目，并在发送完成后清除输入字段。

最后，我们使用socket.on函数来监听read事件，并在收到服务器发送的数据时重新渲染任务列表。

总结

使用Node.js WebSocket实现CRUD操作可以帮助我们快速构建高度可扩展的Web应用程序。在这篇文章中，我们介绍了如何使用socket.io库创建WebSocket服务器，并定义了create、read、update和delete事件来处理CRUD操作。我们还编写了一个简单的客户端页面来处理这些事件。

上一篇: idea打包java可执行jar包

下一篇: C++使用进度条并实现中断功能

评论区

()

相似文章