阿里云-云小站(无限量代金券发放中)
【腾讯云】云服务器、云数据库、COS、CDN、短信等热卖云产品特惠抢购

在线聊天室

218次阅读
没有评论

共计 2757 个字符,预计需要花费 7 分钟才能阅读完成。

一、前端 JavaScript 编写

  • 在前端 JS 中使用 WebSocket 与服务器通讯如下

    var ws = new WebSocket("ws://127.0.0.1:8000/websocket"); // 新建一个 ws 连接 ws.onopen = function() {// 连接建立好后的回调 ws.send("Hello, world"); // 向建立的连接发送消息 }; ws.onmessage = function (evt) {// 收到服务器发送的消息后执行的回调 alert(evt.data); // 接收的消息内容在事件参数 evt 的 data 属性中 };
  • 前端完整代码

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 聊天室 </title> <style> body,ul,li{margin: 0; padding: 0; list-style: none; } #box{width:800px; margin: auto; } #con{height: 400px; width: 100%; background-color: aqua; overflow-x: scroll; border-radius: 20px; } .page_con>li{height: 30px; text-align: left; line-height: 30px; margin-left:10px; margin-top:10px; } #send_message{height: 60px; width: 99%; resize: none; margin-top: 10px; font-size: 20px; border: 1px dotted red; } button{border: none; width: 50px; height: 30px; float: right; border-radius: 10px; color:aqua; } </style> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div id="box"> <div id="top"> <h1>Lucky 在线聊天室 </h1> </div> <div id="con"> <ul class="page_con"> </ul> </div> <textarea name="" id="send_message" cols="30" rows="10"></textarea> <button type="button" onclick="sendMsg()"> 发送 </button> </div> <script type="text/javascript"> var ws = new WebSocket("ws://127.0.0.1:8000/chat"); function sendMsg() {var msg = $("#send_message").val(); ws.send(msg); $("#send_message").val(""); } ws.onmessage = function(e) {$(".page_con").append("<li>" + e.data + "</li>"); } </script> </body> </html>

二、后端代码实现

server.py

import tornado.web import tornado.ioloop import tornado.httpserver import tornado.options import os import datetime from tornado.web import RequestHandler from tornado.options import define, options from tornado.websocket import WebSocketHandler define("port", default=8000, type=int) class IndexHandler(RequestHandler): def get(self): self.render("index.html") class ChatHandler(WebSocketHandler): users = set() # 用来存放在线用户的容器 def open(self): self.users.add(self) # 建立连接后添加用户到容器中 for u in self.users: # 向已在线用户发送消息 u.write_message(u"[%s]-[%s]- 进入聊天室" % (self.request.remote_ip, datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S"))) def on_message(self, message): for u in self.users: # 向在线用户广播消息 u.write_message(u"[%s]-[%s]- 说:%s" % (self.request.remote_ip, datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S"), message)) def on_close(self): self.users.remove(self) # 用户关闭连接后从容器中移除用户 for u in self.users: u.write_message(u"[%s]-[%s]- 离开聊天室" % (self.request.remote_ip, datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S"))) def check_origin(self, origin): return True # 允许 WebSocket 的跨域请求 if __name__ == '__main__': tornado.options.parse_command_line() app = tornado.web.Application([(r"/", IndexHandler), (r"/chat", ChatHandler), ], static_path = os.path.join(os.path.dirname(__file__), "static"), template_path = os.path.join(os.path.dirname(__file__), "template"), debug = True ) http_server = tornado.httpserver.HTTPServer(app) http_server.listen(options.port) tornado.ioloop.IOLoop.current().start()

正文完
星哥说事-微信公众号
post-qrcode
 
星锅
版权声明:本站原创文章,由 星锅 2022-05-26发表,共计2757字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。
阿里云-最新活动爆款每日限量供应
评论(没有评论)
验证码
【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中