如何使用FlaskSQLAlchemy和Javascript保存FlaskSocketIO消息而不使用jQuery？

2024-04-19 18:39:19 发布

您现在位置：Python中文网/ 问答频道 /正文
9297 3

我在YouTube上跟随这个教程：https://www.youtube.com/watch?v=zQDzNNt6xd4创建一个聊天应用程序。我试着保存信息，但没用。 我还遵循了这个教程来保存聊天记录：https://www.youtube.com/watch?v=pigpDSOBNMc

这是Javascript代码：

document.addEventListener('DOMContentLoaded', () => {
    var socket = io.connect('http://' + document.domain + ':' + location.port);
    console.log('I am connected');

    //This sends the message I am now connected
    socket.on('connect', () => {
        socket.send("I am connected");
    });

    socket.on('message', data => {
        const p = document.createElement('p');
        const br = document.createElement('br');
        p.innerHTML = data;
        document.querySelector('#display-message-section').append(p);
        console.log(data);
    });

    socket.on('some-event', data => {
        console.log(data);
    });

    //Sending message to recipient
    document.querySelector('#send_message').onclick = () => {
        socket.send(document.querySelector('#user_message').value);
    }

});

这是应用程序文件：

^{2}$

这是HTML文件：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <!-- Navigation bar -->
    <nav>
    </nav>

    <div id="main-section">
      <!-- Room selection -->
      <nav id="sidebar">
      </nav>
      <!-- Message area -->
      <div id="rightside-pannel">
        <!-- Display message -->
        <div id="display-message-section">  
        </div>

        <form method="POST" action="/">
        <div id="input-area">

          <input type="text" id="user_message" placeholder="Type here..."
          autocomplete="off">
          <button type="button" id="send_message">Send</button>
         </form>

        </div>
      </div>

    </div>
    <!-- Get username -->
    <!-- SocketIO JS -->
  </body>
    <!-- Custom SocketIO KS -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script> 
    <script src="{{ url_for('static', filename='scripts/socketio.js') }}"></script>
</html>

Tags： iodivcomsendlogidmessagedata
0条回答

目前没有回答

相关问题 更多 >

    编程相关推荐