摘要：我们要做一个网页版的聊天室，当一个人发送了消息时，其他人怎么能看到这条信息呢有一个做法就是在网页中不断的运行，发送给服务器，服务器不断返回，当有新的消息时显示在页面上。这样做毫无疑问会产生大量的连接，对服务器的性能和带宽都有影响。
http协议，是客户端每发送一个request，服务器返回一个response，无法做到服务器主动向客户端发送数据。我们要做一个网页版的聊天室，当一个人发送了消息时，其他人怎么能看到这条信息呢？有一个做法就是在网页中不断的运行js，发送request给服务器，服务器不断返回response，当有新的消息时显示在页面上。这样做毫无疑问会产生大量的http连接，对服务器的性能和带宽都有影响。而websocket协议可以做到由服务器主动向客户端发送数据，当有新消息时就主动发送给浏览器，浏览器将内容更新到页面上。更多关于这个协议的详细内容和介绍，可以网上自行搜索。
为了学习websocket，我们来实现一个超级简单的网页聊天室，建立一个html文件，页面显示效果如下，用一个大的div框架用来显示聊天记录，一个input输入内容，一个button用于发送信息：
前端使用js的socket.io，代码如下：
上段代码首先使用cdn引用socket.io.min.js，然后与后端建立连接，接着定义了一个send方法（在html的button中使用onclikc绑定），该方法首先获取input中的内容，然后使用emit方法将其发送到后端，后端(python+Flask-SocketIO)对应的代码是：
from flask import Flask, render_template
from flask_socketio import SocketIO
import config
app = Flask(__name__)
app.config.from_object(config)
socketio = SocketIO(app)
@app.route("/")
def index():
return render_template("websocket.html")
@socketio.on("my event")
def handle_my_custom_namespace_event(data):
socketio.emit("res", data)
if __name__ == "__main__":
socketio.run(app)
代码中使用@socketio.on("my event")注册一个my event事件（与前端socket.emit("my event", {data: msg})一致），然后再使用socketio.emit("res", data)将数据返回前端，前端又通过socket.on("res", callback)进行接收，所有建立了webscoket连接的客户端都会收到。此时整个流程就已经很明确了，再梳理一遍就是：点击button后，触发send函数，获取到input中的内容，然后将数据（准确来说是将携带数据的事件）发送给后端，后端对应这个事件的函数（即使用@socketio.on("my event")注册的函数，类似路由的注册）就会执行，该后端函数向前端发送携带同样数据的res事件，前端socket.on("res", callback)收到"req"事件后，使用callback回调函数处理（即向网页中添加内容）。
开两个浏览器窗口，就可以看出效果了，如下：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92978.html
摘要：聊天室的链接已经失效因为我部署了一个新的网站，欢迎大家访问在搭建简单的网页聊天室框架这篇文章中，我们简单实现了一个聊天室，我又花了一些时间写了个稍微复杂一点点的，大家可以通过进入聊天室或访问。 聊天室的链接已经失效！因为我部署了一个新的网站，欢迎大家访问mytodo.vip 在websocket搭建简单的网页聊天室框架这篇文章中，我们简单实现了一个websocket聊天室，我又花了一...
摘要：我们要做一个网页版的聊天室，当一个人发送了消息时，其他人怎么能看到这条信息呢有一个做法就是在网页中不断的运行，发送给服务器，服务器不断返回，当有新的消息时显示在页面上。这样做毫无疑问会产生大量的连接，对服务器的性能和带宽都有影响。 http协议，是客户端每发送一个request，服务器返回一个response，无法做到服务器主动向客户端发送数据。我们要做一个网页版的聊天室，当一个人发送...
摘要：因为只有管理员才能看到所有的聊天记录，我把验证方式放在了的中，如图中表示查看最近条聊天记录，是验证身份，是我设置的密码。 聊天室的链接已经失效！因为我部署了一个新的网站，欢迎大家访问mytodo.vip 作为聊天室http://180.76.50.50/的管理员，我要看到所有的聊天记录，可以在后台查找数据库数据，但现在这个聊天室的数据是放在远程linux服务器的MongoDB中的，登...
摘要：那么，是否就无法用来开发双向通信的应用呢答案是否定的。内置通信支持，可以与程序基于进行双向通信。通信协议于年被定为标准，并由补充规范。前言 众所周知，PHP用于开发基于HTTP协议的网站应用非常便捷。而HTTP协议是一种单向的通信协议，只能接收客户端的请求，然后响应请求，不能主动向客户端推送信息。因此，一些实时性要求比较高的应用，如实时聊天、直播应用、在线网页游戏等，就不适合采用HTTP协议...
阅读 712·2021-11-23 09:51
阅读 887·2021-11-15 17:57
阅读 1496·2021-09-22 15:24
阅读 683·2021-09-07 09:59
阅读 2095·2019-08-29 15:10
阅读 1727·2019-08-29 12:47
阅读 647·2019-08-29 12:30
阅读 3263·2019-08-26 13:51
