• 【WebSocket&IndexedDB】node+WebSocket&IndexedDB开发简易聊天室

    序幕介绍：

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

    讲人话就是说：WebSocket 使得客户端和服务器之间的数据交换变得更加简单，在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输

    现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

    HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

    WebSocket：

    • 常见方法WebSocket(url)：创建WebSocket对象并与指定的URL建立连接
    1. // 创建WebSocket对象并与服务器建立连接
    2. var socket = new WebSocket("ws://example.com");
    • 常见方法send(data)：向服务器发送数据
    1. // 向服务器发送数据
    2. function sendData(data) {
    3.    socket.send(data);
    4.    console.log("发送数据：" + data);
    5. }
    • 常见方法close(code, reason)：主动关闭WebSocket连接
    1. // 主动关闭WebSocket连接
    2. function closeConnection() {
    3.    socket.close();
    4.    console.log("关闭WebSocket连接");
    5. }
    • 常见事件：onopen：当WebSocket连接成功打开时触发的事件
    1. // 连接成功时触发的事件
    2. socket.onopen = function(event) {
    3.    console.log("WebSocket连接已打开");
    4.    // 发送数据示例
    5.    socket.send("Hello, server!");
    6. };
    • 常见事件：onmessage：当从服务器接收到消息时触发的事件
    1. // 接收到消息时触发的事件
    2. socket.onmessage = function(event) {
    3.    var message = event.data;
    4.    console.log("收到消息：" + message);
    5. };
    • 常见事件：onclose：当WebSocket连接关闭时触发的事件
    1. // 连接关闭时触发的事件
    2. socket.onclose = function(event) {
    3.    console.log("WebSocket连接已关闭");
    4. };
    • 常见事件： onerror：当WebSocket连接发生错误时触发的事件
    1. // 连接错误时触发的事件
    2. socket.onerror = function(error) {
    3.    console.error("WebSocket错误：" + error);
    4. };

    效果图：

    代码展示：

    index.html

    1. <html>
    2. <head>
    3.     <meta charset="UTF-8">
    4.     <title>webrtc demotitle>
    5. head>
    6.  
    7. <body>
    8.     <h1>Websocket简易聊天h1>
    9.     <div id="app">
    10.         <input id="sendMsg" type="text" />
    11.         <button id="submitBtn">发送button>
    12.     div>
    13. body>
    14. <script type="text/javascript">
    15.     //在页面显示聊天内容
    16.     function showMessage(str, type) {
    17.         var div = document.createElement("div");
    18.         div.innerHTML = str;
    19.         if (type == "enter") {
    20.             div.style.color = "blue";
    21.         } else if (type == "leave") {
    22.             div.style.color = "red";
    23.         }
    24.         document.body.appendChild(div);
    25.     }
    26.  
    27.     //新建一个websocket
    28.     var websocket = new WebSocket("ws://172.21.2.52:8099");
    29.     //连接建立时触发
    30.     websocket.onopen = function () {
    31.         console.log("已经连上服务器----");
    32.         document.getElementById("submitBtn").onclick = function () {
    33.             // 获取输入的内容
    34.             var txt = document.getElementById("sendMsg").value;
    35.             if (txt) {
    36.                 //使用连接发送数据
    37.                 websocket.send(txt);
    38.             }
    39.         };
    40.     };
    41.     //连接关闭时触发
    42.     websocket.onclose = function () {
    43.         console.log("websocket close");
    44.     };
    45.     //客户端接收服务端数据时触发
    46.     websocket.onmessage = function (e) {
    47.         var mes = JSON.parse(e.data);   // json格式
    48.         // 渲染
    49.         showMessage(mes.data, mes.type);
    50.     };
    51. script>
    52.  
    53. html>

    node.js    记得下载：nodejs-websocket依赖

    1. var ws = require("nodejs-websocket")
    2. var port = 8099;
    3. var user = 0;
    4.  
    5. // 创建一个连接
    6. var server = ws.createServer(function (conn) {
    7.     console.log("创建一个新的连接--------");
    8.     user++;
    9.     // 给连接设置昵称属性
    10.     conn.nickname = "user" + user;
    11.     // 给连接设置文件描述符属性
    12.     conn.fd = "user" + user;
    13.     var mes = {};
    14.     // 消息类型为进入聊天室
    15.     mes.type = "enter";
    16.     // 消息内容为进入提示
    17.     mes.data = conn.nickname + " 进来啦"
    18.     // 广播该消息给所有客户端
    19.     broadcast(JSON.stringify(mes));
    20.  
    21.     //向客户端推送消息
    22.     conn.on("text", function (str) {
    23.         console.log("回复 " + str)
    24.         // 消息类型为普通消息
    25.         mes.type = "message";
    26.         mes.data = conn.nickname + " 说:    " + str;
    27.         broadcast(JSON.stringify(mes));
    28.     });
    29.  
    30.     //监听关闭连接操作
    31.     conn.on("close", function (code, reason) {
    32.         console.log("关闭连接");
    33.         mes.type = "leave";
    34.         mes.data = conn.nickname + " 离开了"
    35.         broadcast(JSON.stringify(mes));
    36.     });
    37.  
    38.     //错误处理
    39.     conn.on("error", function (err) {
    40.         console.log("监听到错误");
    41.         console.log(err);
    42.     });
    43. }).listen(port);
    44.  
    45. function broadcast(str) {
    46.     server.connections.forEach(function (connection) {
    47.         connection.sendText(str);
    48.     })
    49. }

    IndexedDB

    IndexedDB（索引数据库）是浏览器提供的一种客户端数据库存储解决方案。它允许 Web 应用程序在用户设备上存储大量结构化数据，并可在离线状态下进行查询和操作。IndexedDB 使用对象存储模型，类似于关系型数据库，但不支持 SQL 查询语言。

    • open(): 打开数据库连接
    1. let request = window.indexedDB.open("myDatabase", 1);
    2.  
    3. request.onerror = function(event) {
    4.   console.log("Failed to open database");
    5. };
    6.  
    7. request.onsuccess = function(event) {
    8.   let db = event.target.result;
    9.   console.log("Database opened successfully");
    10. };
    • createObjectStore(): 创建对象存储空间
    let objectStore = db.createObjectStore("messages", { keyPath: "id", autoIncrement: true });
    • createIndex(): 创建索引
    objectStore.createIndex("type", "user", { unique: false });
    • transaction(): 开启事务
    let transaction = db.transaction(["messages"], "readwrite");
    • objectStore.add(): 添加数据到对象存储空间
    1. let objectStore = transaction.objectStore("messages");
    2. let message = { id: 1, type: "text", data: "Hello World", user: "Alice" };
    3.  
    4. let request = objectStore.add(message);
    5. request.onsuccess = function(event) {
    6.   console.log("Data added successfully");
    7. };
    • objectStore.get(): 通过主键获取数据
    1. let objectStore = transaction.objectStore("messages");
    2.   
    3. let request = objectStore.get(1);
    4. request.onsuccess = function(event) {
    5.   let data = event.target.result;
    6.   console.log(data);
    7. };
    • objectStore.getAll(): 获取所有数据
    1. let objectStore = transaction.objectStore("messages");
    2.  
    3. let request = objectStore.getAll();
    4. request.onsuccess = function(event) {
    5.   let data = event.target.result;
    6.   console.log(data);
    7. };
    • objectStore.put(): 更新数据
    1. let objectStore = transaction.objectStore("messages");
    2. let message = { id: 1, type: "text", data: "Hello Updated", user: "Alice" };
    3.  
    4. let request = objectStore.put(message);
    5. request.onsuccess = function(event) {
    6.   console.log("Data updated successfully");
    7. };
    • objectStore.delete(): 删除数据
    1. let objectStore = transaction.objectStore("messages");
    2.   
    3. let request = objectStore.delete(1);
    4. request.onsuccess = function(event) {
    5.   console.log("Data deleted successfully");
    6. };
    • clear(): 清空对象存储空间中的所有数据
    1. let objectStore = transaction.objectStore("messages");
    2.  
    3. let request = objectStore.clear();
    4. request.onsuccess = function(event) {
    5.   console.log("Object store cleared successfully");
    6. };

    WebSocket加IndexedDB完整代码

    WebSocket实现聊天，IndexedDB将聊天数据存储起来，防止刷新丢失

    html

    1. DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>webrtc demotitle>
    7. head>
    8.  
    9. <body>
    10.     <h1>Websocket简易聊天h1>
    11.     <div id="app">
    12.         <input id="sendMsg" type="text" />
    13.         <button id="submitBtn">发送button>
    14.         <div id="leaveMessage">div>
    15.         <div id="chat">div>
    16.     div>
    17.  
    18.     <script type="text/javascript">
    19.         var db, transaction, objectStore;
    20.         // 在页面显示聊天内容
    21.         function showMessage(str, type, user = null, state = 1) {
    22.             var div = document.createElement("div");
    23.  
    24.             var spanStr = document.createElement("span");
    25.             spanStr.innerHTML = str;
    26.  
    27.             if (user != null) {
    28.                 var spanUser = document.createElement("span");
    29.                 spanUser.innerHTML = user;
    30.                 div.appendChild(spanUser);
    31.             }
    32.  
    33.             if (type == "enter") {
    34.                 div.style.color = "blue";
    35.             } else if (type == "leave") {
    36.                 div.style.color = "red";
    37.             }
    38.  
    39.             div.appendChild(spanStr);
    40.             document.getElementById("chat").appendChild(div);
    41.             if (state == 1) {
    42.                 document.getElementById("chat").appendChild(div);
    43.             } else {
    44.                 document.getElementById("leaveMessage").appendChild(div);
    45.             }
    46.         }
    47.  
    48.         // 创建或打开 IndexedDB 数据库
    49.         var request = window.indexedDB.open("chatDB", 1);
    50.         request.onerror = function () {
    51.             console.log("无法打开数据库");
    52.         };
    53.  
    54.         request.onupgradeneeded = function (event) {
    55.             //  获取到数据库对象 db
    56.             db = event.target.result;
    57.             //  创建名为 "messages" 的对象存储，并指定 "id" 为键路径，并自动递增生成
    58.             objectStore = db.createObjectStore("messages", { keyPath: "id", autoIncrement: true });
    59.             // 创建一个名为 "type" 的索引，用于根据消息类型进行检索，允许重复值
    60.             objectStore.createIndex("type", "user", { unique: false });
    61.             // 创建一个名为 "data" 的索引，用于根据消息内容进行检索，允许重复值
    62.             objectStore.createIndex("data", "data", { unique: false });
    63.             objectStore.createIndex("state", "state", { unique: false });
    64.             objectStore.createIndex("user", "user", { unique: false });
    65.         };
    66.  
    67.         request.onsuccess = function (event) {
    68.             db = event.target.result;
    69.             // 新建一个websocket
    70.             var websocket = new WebSocket("ws://172.21.2.52:8099");
    71.  
    72.             // 连接建立时触发
    73.             websocket.onopen = function () {
    74.                 console.log("已经连上服务器----");
    75.                
    76.                 document.getElementById("submitBtn").onclick = function () {
    77.                     var txt = document.getElementById("sendMsg").value;
    78.                     if (txt) {
    79.                         websocket.send(JSON.stringify(txt));
    80.                     }
    81.                 };
    82.                 // 给输入框添加键盘按下事件监听器
    83.                 document.getElementById("sendMsg").addEventListener("keydown", function (event) {
    84.                     // 检查按下的键是否是回车键（键码为13）
    85.                     if (event.keyCode == 13) {
    86.                         // 取消回车键的默认行为（避免表单提交等操作）
    87.                         event.preventDefault();
    88.                         var txt = document.getElementById("sendMsg").value;
    89.                         if (txt) {
    90.                             websocket.send(JSON.stringify(txt));
    91.                         }
    92.                     }
    93.                 });
    94.             };
    95.  
    96.             // 连接关闭时触发
    97.             websocket.onclose = function () {
    98.                 console.log("websocket close");
    99.             };
    100.  
    101.             // 客户端接收服务端数据时触发
    102.             websocket.onmessage = function (e) {
    103.                 var mes = JSON.parse(e.data); // json格式
    104.                 // 渲染
    105.                 if (mes.state == 0) {
    106.                     showMessage(mes.data, mes.type, mes.user);
    107.                     saveMessage(mes)
    108.                     document.getElementById("sendMsg").value = ''
    109.                 } else {
    110.                     showMessage(mes.data, mes.type);
    111.                 }
    112.             };
    113.  
    114.             function saveMessage(message) {
    115.                 let transaction = db.transaction(["messages"], "readwrite");
    116.                 let objectStore = transaction.objectStore("messages");
    117.                 var saveRequest = objectStore.add(message);
    118.                 saveRequest.onsuccess = function () {
    119.                     console.log("消息已保存到 IndexedDB");
    120.                 };
    121.                 saveRequest.onerror = function () {
    122.                     console.log("保存消息时发生错误");
    123.                 };
    124.             }
    125.  
    126.             function loadMessages() {
    127.                 // 创建一个只读事务，该事务用于操作名为 "messages" 的对象存储
    128.                 transaction = db.transaction(["messages"], "readonly");
    129.                 // 获取对 "messages" 对象存储的引用，以便进行后续的操作
    130.                 objectStore = transaction.objectStore("messages");
    131.                 // 回一个获取所有数据的请求
    132.                 var getAllRequest = objectStore.getAll();
    133.  
    134.                 // 在获取数据成功时触发
    135.                 getAllRequest.onsuccess = function () {
    136.                     var messages = getAllRequest.result;
    137.                     messages.forEach(function (message) {
    138.                         showMessage(message.data, message.type, message.user, 0);
    139.                     });
    140.                 };
    141.             }
    142.  
    143.             // 页面加载完成后加载聊天记录
    144.             window.onload = function () {
    145.                 loadMessages();
    146.             };
    147.         };
    148.     script>
    149. body>
    150.  
    151. html>

    node

    1. var ws = require("nodejs-websocket")
    2. var port = 8099;
    3. var user = 0;
    4.  
    5. // 创建一个连接
    6. var server = ws.createServer(function (conn) {
    7.     console.log("创建一个新的连接--------");
    8.     user++;
    9.     // 给连接设置昵称属性
    10.     conn.nickname = "user" + user;
    11.     // 给连接设置文件描述符属性
    12.     conn.fd = "user" + user;
    13.     var mes = {};
    14.     // 消息类型为进入聊天室
    15.     mes.type = "enter";
    16.     // 消息内容为进入提示
    17.     mes.data = conn.nickname + " 进来啦";
    18.     mes.state = 1;
    19.     // 广播该消息给所有客户端
    20.     broadcast(JSON.stringify(mes));
    21.  
    22.     //向客户端推送消息
    23.     conn.on("text", function (str) {
    24.         console.log("回复 " + str)
    25.         // 消息类型为普通消息
    26.         mes.type = "message";
    27.         mes.user = conn.nickname + " 说:";
    28.         mes.data = str;
    29.         mes.state = 0;
    30.         broadcast(JSON.stringify(mes));
    31.     });
    32.  
    33.     //监听关闭连接操作
    34.     conn.on("close", function (code, reason) {
    35.         console.log("关闭连接");
    36.         mes.type = "leave";
    37.         mes.data = conn.nickname + " 离开了"
    38.         broadcast(JSON.stringify(mes));
    39.     });
    40.  
    41.     //错误处理
    42.     conn.on("error", function (err) {
    43.         console.log("监听到错误");
    44.         console.log(err);
    45.     });
    46. }).listen(port);
    47.  
    48. function broadcast(str) {
    49.     server.connections.forEach(function (connection) {
    50.         connection.sendText(str);
    51.     })
    52. }

  • 相关阅读:
    四、概率论
    招投标系统简介 企业电子招投标采购系统源码之电子招投标系统 —降低企业采购成本
    JAVA计算机毕业设计沧州雄狮足球俱乐部管理系统Mybatis+源码+数据库+lw文档+系统+调试部署
    Git工具的使用
    MySQL——子查询和嵌套查询
    moodle4.04无法上传中文文件名
    ELK Springboot集成ElasticSearch7.6.2 SpringData
    最全面的Spring教程（五）——文件上传与下载
    【云原生】-Docker部署及使用压测神器sysbench
    ubuntu 安装harbor
  • 原文地址：https://blog.csdn.net/weixin_52479803/article/details/132337529