websocket聊天室
websocket方法总结
# 后端 3个
class ChatConsumer(WebsocketConsumer):
def websocket_connect(self, message):
"""客户端请求建立链接时 自动触发"""
self.accept() # 建立链接 并且自动帮你维护每一个客户端
def websocket_receive(self, message):
"""客户端发送数据过来 自动触发"""
# print(message) # message = {'type': 'websocket.receive', 'text': 'hello world！'}
text = message.get('text') # 真正的数据
# 给客户端发送消息
self.send(text_data='介绍女朋友')
def websocket_disconnect(self, message):
"""客户端断开链接之后 自动触发"""
raise StopConsumer()
# 前端 4个
var ws = new WebSocket('ws://127.0.0.1:8000/home/');
// 1 握手环节验证成功之后 自动触发 onopen
ws.onopen = function () {
console.log('握手成功')
}
// 2 给服务端发送消息 send
function sendMsg() {
ws.send($('#txt').val())
}
// 3 一旦服务端有消息 自动触发 onmessage
ws.onmessage = function (args) {
// console.log(args) // args是一个对象
// 获取发送的数据
console.log(args.data)
}
// 4 断开链接之后 自动触发 onclose
ws.onclose = function () {
ws.close()
}
群聊功能
我们是通过自己维护一个列表存储链接对象的方式完成了简易版本的群聊
其实channels给你提供了一个用于做群聊的模块，该模块可以实现真正的分组聊天
该模块就是channel-layers
基于websocket聊天室(版本一)
routing.py
from channels.routing import ProtocolTypeRouter,URLRouter
from django.conf.urls import url
from app01 import consumers
application = ProtocolTypeRouter({
'websocket':URLRouter([
# 书写websocket路由与视图函数对应关系
url(r'^home/',consumers.ChatConsumer)
])
})
consumers.py
from channels.exceptions import StopConsumer
from channels.generic.websocket import WebsocketConsumer
consumer_object_list = []
class ChatConsumer(WebsocketConsumer):
def websocket_connect(self, message):
"""客户端请求建立链接时 自动触发"""
self.accept() # 建立链接 并且自动帮你维护每一个客户端
consumer_object_list.append(self) # 来一个用户添加到列表中
def websocket_receive(self, message):
"""客户端发送数据过来 自动触发"""
# print(message) # message = {'type': 'websocket.receive', 'text': 'hello world！'}
text = message.get('text') # 真正的数据
# 循环给每一个客户端发送消息，模拟同步
for obj in consumer_object_list:
obj.send(text_data=text)
def websocket_disconnect(self, message):
"""客户端断开链接之后 自动触发"""
consumer_object_list.remove(self)
raise StopConsumer()
home.html
<body>
<h1>聊天室</h1>
<input type="text" id="txt">
<button onclick="sendMsg()">发送</button> # 绑定事件
<h1>聊天记录</h1>
<div class="record"></div>
<script>
# 帮我们自动完成握手环节
var ws = new WebSocket('ws://127.0.0.1:8000/home/');
// 1 握手环节验证成功之后 自动触发 onopen
ws.onopen = function () {
console.log('握手成功')
}
// 2 给服务端发送消息 send
function sendMsg() {
ws.send($('#txt').val())
}
// 3 一旦服务端有消息 自动触发 onmessage
ws.onmessage = function (args) {
// console.log(args) // args是一个对象
// 获取发送的数据
// 1 创建p标签
var pEle = $('<p>');
pEle.text(args.data); # 获取后端传过来的数据，并放进p标签
$('.record').append(pEle) # 添加p标签
}
// 4 断开链接之后 自动触发 onclose
ws.onclose = function () {
ws.close()
}
</script>
</body>
websocket聊天室的更多相关文章
- WebSocket聊天室demo
根据Socket异步聊天室修改成WebSocket聊天室 WebSocket特别的地方是 握手和消息内容的编码.解码(添加了ServerHelper协助处理) ServerHelper: using ...
- Netty入门（一）之webSocket聊天室
一:简介 Netty 是一个提供 asynchronous event-driven (异步事件驱动)的网络应用框架,是一个用以快速开发高性能.高可靠性协议的服务器和客户端. 换句话说,Netty 是 ...
- 使用.NET Core和Vue搭建WebSocket聊天室
博客地址是:https://qinyuanpei.github.io. WebSocket是HTML5标准中的一部分,从Socket这个字眼我们就可以知道,这是一种网络通信协议.WebSocket是 ...
- 用Java构建一个简单的WebSocket聊天室
前言 首先对于一个简单的聊天室,大家应该都有一定的概念了,这里我们省略用户模块的讲解,而是单纯的先说说聊天室的几个功能:自我对话.好友交流.群聊.离线消息等. 今天我们要做的demo就能帮我们做到这一 ...
- php +html5 websocket 聊天室
针对内容比较长出错,修改后的解码函数 和 加码函数 原文请看上一篇 http://yixun.yxsss.com/yw3104.html function uncode($str,$key){ $ma ...
- koa2+webSocket 聊天室
做了一个简单的的聊天室,用来看看 koa和 websocket的使用还是挺好的,已经放到gitHub. https://github.com/zhaowanhua/koa2WebSocket
- 实现一个简单的WebSocket聊天室
WebSocket 简介 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主 ...
- tornado websocket聊天室
1.app.py #!/usr/bin/env python # -*- coding:utf-8 -*- import uuid import json import tornado.ioloop ...
- 基于springboot的websocket聊天室
WebSocket入门 1.概述 1.1 Http #http简介 HTTP是一个应用层协议,无状态的,端口号为80.主要的版本有1.0/1.1/2.0. #http1.0/1.1/2.0 1.HTT ...
随机推荐
- RPA如何跑赢传统自动化和人工？
过去的4年时间里,RPA(机器人流程自动化)一词,在Gartner的搜索引擎中一直排名前五.去年Gartner发表的调查数据中显示,RPA行业在2018年保持了60%以上的增长速度,从而成为全球增长最 ...
- mimtproxy的使用（windows）
1.安装 pip3 install mitmproxy 或者下载安装指定版本:https://mitmproxy.org/downloads/ 2.配置证书 对于mitmproxy来说,如果想要截获H ...
- 雅奇880、990、小土豆调用EPX Studio 编译的DLL的编程方法~
在雅奇990中,使用“外部文件-调用链接库文件”命令实现与EP的通信,例如: 1.调用链接库文件(取项目文件信息() + '资源文件\Project1.dll', 'Unit1.rpas:Result ...
- 都2020年了 还要学JSP吗？
前言 2020年了,还需要学JSP吗?我相信现在还是在大学的同学肯定会有这个疑问. 其实我在18年的时候已经见过类似的问题了「JSP还应该学习吗」.我在18年发了几篇JSP的文章,已经有不少的开发者评 ...
- [Linux][C][gcc] Linux GCC 编译链接 报错ex: ./libxxx.so: undefined reference to `shm_open'
本人原创文章,文章是在此代码github/note的基础上进行补充,转载请注明出处:https://github.com/dramalife/note. 以librt丶用户自定义动态库libxxx 和 ...
- eclipse操作快捷键
Eclipse最全快捷键,熟悉快捷键可以帮助开发事半功倍,节省更多的时间来用于做有意义的事情. Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行 Ctrl+Alt+↓ ...
- Log4j不写入日志文件排错记录
背景: 之前用 log4j一直设置的输出到控制台.今天由于job任务出现了异常,因为是异步的,没办法在控制台看错误信息了,于是乎决定把日志打印到文件里面.然后就找了篇博客配置了下.但是配置完后,怎么也 ...
- 渗透测试-IP相关知识整理
IP地址: 英文名称为Internet Protocol Address,是指互联网协议地址又称为网际协议地址.IP地址是Ip协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台机器分配一个 ...
- 新手版超详细LoadRunner12完整安装+汉化过程
01下载 首先从百度网盘获取到这几个文件(网盘地址会附在文末,过期请联系): 我安装的是社区版+中文汉化过的,使用我只下载了第一个和第三个文件,下面我将讲一下如何安装. 02安装社区版 1.选择“ ...
- K折-交叉验证
k-折交叉验证(k-fold crossValidation):在机器学习中,将数据集A分为训练集(training set)B和测试集(test set)C,在样本量不充足的情况下,为了充分利用数据 ...