rxdb.js数据库实现一个聊天室效果代码-html代码-BFW代码库

rxdb.js数据库实现一个聊天室效果代码

代码语言：html

所属分类：其他

代码描述：rxdb.js数据库实现一个聊天室效果代码，利用rxdb.js这款nosql数据库在浏览器端实现一个简单的聊天室，rxdb支持nodejs、浏览器端多端运行。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bulma.min.css">

    <style>
        body {
          background: rgb(1,1,5);
          background: linear-gradient(90deg, rgba(1,1,5,0.8491771708683473) 0%, rgba(9,85,121,1) 13%, rgba(1,200,243,1) 88%, rgba(0,212,255,1) 100%); 
        }
        
        .container {
            display: grid;
            grid-template-columns: 3fr 3fr;
            grid-gap: 10px;
        }
        
        .chat {
        /*   border: 1px solid #ccc; */
          padding: 20px;
        }
        
        title {
          text-align: center;
        }
    </style>



</head>


    <body id="app">
        <h1 class="title is-1 has-text-centered"> RxDB Chat Example</h1>
        <div class="container">
            <div id="chatbox1" class="chat">
                <div id="list-box" class="box">
                    <h3 class="title is-3">Message</h3>
                    <ul class="messagesList">No Messages...</ul>
                </div>
                <div id="insert-box" class="box">
                    <input style="display: none;" type="text" placeholder="Name" name="name" value="User1" disabled />
                    <textarea class="textarea has-fixed-size" placeholder="Message" name="message"></textarea>
                    <br>
                    <button class="button is-link" onclick="addMessage('chatbox1');">reply</button>
                </div>
            </div>
            <div id="chatbox2" class="chat">
                <div id="list-box" class="box">
                    <h3 class="title is-3">Message</h3>
                    <ul class="messagesList">No Messages...</ul>
                </div>
                <div id="insert-box" class="box">
                    <input style="display: none;" type="text" placeholder="Name" name="name" value="User2" disabled />
                    <textarea class="textarea has-fixed-size" type="text" placeholder="Message" name="message"></textarea>
                    <br>
                    <button class="button is-link" onclick="addMessage('chatbox2');">reply</button>
                </div>
            </div>
        </div>



<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rxdb.browserify.min.js"></script>
    <script>
        // https://hamisme.blogspot.com/2019/10/rxdb-live-chat-example.html
        var messagesList = document.querySelectorAll('.messagesList');
 .........完整代码请登录后点击上方下载按钮下载查看