共计 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 属性中 }; -
前端完整代码
<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() |
正文完
星哥玩云-微信公众号
