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 ...
随机推荐
- JVM笔记-Java技术体系与JVM概述
1. 简述 Java 不仅仅是一门编程语言,还是一个由一系列计算机软件和规范组成的技术体系. Java 的广告词为 "一次编写,到处运行",之所以能够做到"跨平台&quo ...
- [日志分析]Graylog2采集mysql慢日志
之前聊了一下graylog如何采集nginx日志,为此我介绍了两种采集方法(主动和被动),让大家对graylog日志采集有了一个大致的了解. 从日志收集这个角度,graylog提供了多样性和灵活性,大 ...
- rem - 移动前端自适应适配布局解决方案和比较(转载)
原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些 ...
- 我用STM32MP1做了个疫情监控平台4—功能完善界面重新设计
目录 前言 界面展示 新增功能 API 接口说明 多个接口数据的获取和解析 FontAwesome字体图标库的使用 代码下载 系列教程 @ 前言 之前我用STM32MP1和Qt实现了疫情监控平台,系列 ...
- Python下载各种功能包出问题
问题详情 点击之后出现 AttributeError: module 'importlib._bootstrap' has no attribute 'SourceFileLoader' 解决方法 c ...
- 不要再认为Stream可读性不高了！
距离Java 8发布已经过去了7.8年的时间,Java 14也刚刚发布.Java 8中关于函数式编程和新增的Stream流API至今饱受"争议". 如果你不曾使用Stream流,那 ...
- Fluent算例精选｜02瞬态滑移网格分析叶轮机械内部流动
本算例使用的软件:fluent.icem 通过学习本算例您将获得? 1.学会周期区域创建 2.学会瞬态求解器及滑移网格边界条件设置 3.学会周期面.滑移面设置 4.学会如何监测压力脉动(声学仿真) 5 ...
- VS2019 C++动态链接库的创建使用(1) - 创建使用dll
静态库:函数和数据被编译进一个二进制文件,通常扩展名为.lib,在使用静态库的情况下,在编译链接可执行文件时,链接器从库中复制这些函数和数据并把它们和应用程序的其它模块组合起来创建最终的可执行文件. ...
- hdu3368 dfs 下棋
两颗黑子之间的白子可以翻装成黑子,两颗白子之间的黑子可以翻转成白子,对于一个给定位置,有八个方向有翻转其他颜色的子的可能.规则之一是下棋的位置一定要能翻转对方的子. 求最优情况:黑子能翻转的白子个数的 ...
- 企业级自动化部署方案——ansible实现tomcat自动安装和配置
共耗时10多个小时 思路一 总体设计 ansible-playbook目录结构 [root@ansible ~]# tree /etc/ansible/roles/tomcat /etc/ansibl ...