webScoket技术

后台Python代码

#!/usr/bin/python3
# *-* coding:utf-8 *-*
import random
import time

from tornado.websocket import WebSocketHandler
from tornado.web import RequestHandler

class RobbitHandler(RequestHandler):
    def get(self):
        """"""
        self.render('message/robbit.html')

class MessageOldHandler(WebSocketHandler):
    """单人对话"""
    def open(self):
        """"""
        # 表示客户请求连接
        print(self.request)
        ip = self.request.remote_ip
        # 向客户端发送消息
        self.write_message('你好，%s' % ip)
        self.write_message('starting')
        for i in range(10):
            time.sleep(1)
            number = random.randint(0, 500)
            self.write_message(str(number))
        self.write_message('end')

class MessageHandler(WebSocketHandler):
    """多人对话"""
    # 当前处理器是一个长连接
    online_clients = []
    print('sss')
    def send_all(self, msg):
        """"""
        for client in self.online_clients:
            # 向客户端发送消息
            client.write_message(msg)

    def open(self):
        """"""
        # 表示客户请求连接
        # ip = self.request.remote_ip
        print(self.get_secure_cookie('username').decode('utf8'))
        self.online_clients.append(self)
        username = self.get_secure_cookie('username').decode('utf8')
        self.send_all('%s进入了聊天室' % username)

    def on_message(self, message):
        """"""
        # ip = self.request.remote_ip
        username = self.get_secure_cookie('username').decode('utf8')
        self.send_all('%s说：%s' % (username, message))

    def on_connection_close(self):
        """"""
        self.online_clients.remove(self)


前端页面代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>聊天室</title>
  <style>
    #message_body {
      height: 400px;
      background: lightgoldenrodyellow;
      border: 1px solid #1cb7fd;
      overflow-y: auto;
    }
  </style>
</head>
<body>
<h1>聊天室</h1>
<div id="message_body">

</div>
<div>
  <input type="text" id="msg"><br>
  <button type="button" id="sendBtn">发送</button>
</div>
<script>
  function $(id) {
    return document.getElementById(id)
  }

  window.onload = function () {
    let socket = new WebSocket('ws://localhost:8000/message')
    // 设置打开socket连接的回调函数
    socket.onopen = function (ev2) {
      console.log('====open===')
      console.log(ev2)
    }
    let numberIsStarted = false;
    // 接收服务端发送的消息的回调函数
    socket.onmessage = function (ev2) {
      console.log('====msg===')
      console.log(ev2)
      let data = ev2.data
      $('message_body').innerText += data + "\n"
    }

    // 接收到错误信息的回调函数
    socket.onerror = function (ev2) {
      console.log('====err===')
      console.log(ev2)
    }
    // 发送数据
    $('sendBtn').addEventListener('click', function (e) {
      let msg = $('msg').value
      console.log(msg)
      socket.send(msg);  // 向服务端发送消息
    })
  }
</script>
</body>
</html>
posted @ 2022-07-25 14:38  ALin_Da  阅读(22)  评论(0)  编辑  收藏  举报