当前位置：首页 > article >正文

＜Sqlite＞＜websocket＞使用Sqlite与websocket，实现网页端对数据库的【读写增删】操作

article 2024/11/20 20:58:41

前言
本文是在websocket进行通讯的基础，添加数据库进行数据的存储，数据库软件使用的是sqlite。

环境配置
系统：windows
平台：visual studio code
语言：javascript、html
库：nodejs、sqlite

概述
此前，我们实现在利用websocket和socket，将网页端与下位控制器如PLC进行数据通讯的方法，现在，我们来更加前进一步，假设我们的设备现场有一些生产数据，除了发送到网页端显示，还需要存储起来，这时我们就需要使用数据库，将接收到的现场数据保存，以便于随时读取和修改。这就是我们这篇文章要实现的功能。

前提条件
需要提前安装sqlite、nodejs
1、sqlite安装：
去sqlite官网下载windows下的预编译文件，解压后为其文件夹路径配置环境变量。然后在vscode的终端，使用：npm install sqlite3来为项目安装sqlite3模块。
2、nodejs安装
去nodejs官网下载安装软件，尽量选择最新的版本。nodejs安装时，勾选自动下载需要的插件，否则你在使用nodejs的过程，很可能会遇到各种问题。如果nodejs自动安装插件过程遇到问题，比如PowerShell报错，类似下面这样：

choco : 无法将“choco”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正
确，然后再试一次。
所在位置行:1 字符: 176
… .DownloadString(‘https://chocolatey.org/install.ps1’)); choco upgrade …
                                                        ~~~~~
CategoryInfo : ObjectNotFound: (choco:String) [], CommandNotFoundException

FullyQualifiedErrorId : CommandNotFoundException

那么，你可以按照以下步骤处理：
1、先退出PowerShell，然后以管理员模式重新启动PowerShell，输入以下指令：

set-executionpolicy remotesigned

然后在弹出的选项中，输入：Y
然后输入指令：

iwr https://chocolatey.org/install.ps1 -UseBasicParsing | iex

来安装chocolatey，但是如果你已经安装了chocolatey，但是因为各种其他原因不起作用，那么最好先删除C盘下的chocolatey文件夹，然后执行以上指令，重新安装chocolatey。
完成后，再次执行nodejs的插件安装步骤，这个步骤可以随时重新启动。

代码实现
下面将一步步实现javascript与sqlite数据通讯并在网页端显示数据且操作数据的过程。

Step1、实现网页端websocket通讯

此处不再赘述，可以参看我之前的博文或者网络上搜寻，亦或是借助AI。
相关博文链接
＜javascript＞＜node.js＞＜websocket＞使用node.js创建websocket服务器，与网页端websocket客户端进行数据通讯，且创建windows批处理程序一键启动

Step2、实现javascript与sqlite数据库通讯

要实现javascript与sqlite通讯，需要先安装sqlite3模块：

npm install sqlite3

然后我们创建一个server.js文件，首先要引用ws和sqlite3模块：

const WebSocket = require('ws');
const sqlite3 = require('sqlite3').verbose();

然后，先创建ws即websocket连接，在websocket的连接中，加入对数据库的操作。为了方便，我们可以先将数据库的操作封装为函数，写在单独的文件中，然后导出接口即可。
所以，我们创建一个sqlitedb.js，在里面封装以下函数：

module.exports ={
   
    getalldata,
    insertdata,
    deletedata,
    closedb,
};

一共四个函数，分别是：
getalldata：用于获取数据库的所有数据
inserdata：用于向数据库插入数据
deletedata：用于向数据库删除数据
closedb：用于关闭数据库连接
代码如下：
sqlitedb.js

const sqlite3=require('sqlite3').verbose();
let db=new sqlite3.Database('E:\\100 htmlcss\\websql\\mydb.db');//将路径修改为你的实际数据库文件路径

/**
 * 获取数据库数据
 * @param {*} callback 
 */
function getalldata(callback){
   
    db.all("SELECT * FROM mytable",(err,rows)=>{
   
        if (err){
   
            callback(err,null);
        } else {
   
            callback(null,rows);
        }
    });
}

/**
 * 插入数据库数据
 * @param {*} data 
 * @param {*} callback 
 */
function insertdata(data,callback){
   
    //console.log(data);
    const stmt =db.prepare("INSERT INTO mytable (编号,UID,状态) VALUES (?,?,?)");
    stmt.run(data.name,data.value,data.status,(err) => {
   
        if (err){
   
            callback(err,null);
        } else {
   
            //console.log('插入成功');
            callback(null,'ok');
            stmt.finalize();
        }
    })
}


/**
 * 删除数据库数据
 * @param {*} id 
 * @param {*} callback 
 */
function deletedata(num,callback){
   
    const sqlite3="DELETE FROM mytable WHERE 编号=?";
    db.run(sqlite3,[num],function(err){
   
        if (err){
   
            return callback(err,null);
        } 
        const changes=this.changes;
        callback(null,changes)
    }
    )
}

要注意的是数据库文件的路径，可以使用Navicat工具来操作数据库，比较方便。
Navicat官网链接：https://www.navicat.com.cn/

然后在server.js中导入以上接口函数：

const {
    getalldata,insertdata,deletedata } =require('./sqlitedb');

Step3、数据库的读写增删

本文的核心是与数据库进行通讯，这里我们简单说一下逻辑。
我们的设计是通过网页端对数据库进行读取，通过getalldata函数获取当前数据库文件中的所有项，然后通过websocket服务端转发给websocket客户端，即网页端，网页端获取到了数据后，动态添加到页面上，以表格形式，如下：
在这里插入图片描述
当我们正确显示了数据库的数据后，我们还希望能够在网页端对数据进行操作，然后同步到数据库。
如我们在网页端删除某一行数据，点击删除按钮后，发送删除请求给websock服务端，websocket服务端接收到信息后，根据客户端发送的数据id，对数据库进行删除操作，删除成功后，返回信息，同时重新获取数据库数据，然后更新页面。
以此类推，插入新数据的操作也是一致的。
对于网页端，我们为页面设计了简单的布局，如上图所示，其html代码如下（供参考）：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Client</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Sqlite数据库读写页面</h1>

  <!-- 添加插入数据按钮与输入框 -->

  <div>