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聊天室的更多相关文章

  1. WebSocket聊天室demo

    根据Socket异步聊天室修改成WebSocket聊天室 WebSocket特别的地方是 握手和消息内容的编码.解码(添加了ServerHelper协助处理) ServerHelper: using ...

  2. Netty入门（一）之webSocket聊天室

    一:简介 Netty 是一个提供 asynchronous event-driven (异步事件驱动)的网络应用框架,是一个用以快速开发高性能.高可靠性协议的服务器和客户端. 换句话说,Netty 是 ...

  3. 使用.NET Core和Vue搭建WebSocket聊天室

    博客地址是:https://qinyuanpei.github.io.  WebSocket是HTML5标准中的一部分,从Socket这个字眼我们就可以知道,这是一种网络通信协议.WebSocket是 ...

  4. 用Java构建一个简单的WebSocket聊天室

    前言 首先对于一个简单的聊天室,大家应该都有一定的概念了,这里我们省略用户模块的讲解,而是单纯的先说说聊天室的几个功能:自我对话.好友交流.群聊.离线消息等. 今天我们要做的demo就能帮我们做到这一 ...

  5. php +html5 websocket 聊天室

    针对内容比较长出错,修改后的解码函数 和 加码函数 原文请看上一篇 http://yixun.yxsss.com/yw3104.html function uncode($str,$key){ $ma ...

  6. koa2+webSocket 聊天室

    做了一个简单的的聊天室,用来看看 koa和 websocket的使用还是挺好的,已经放到gitHub. https://github.com/zhaowanhua/koa2WebSocket

  7. 实现一个简单的WebSocket聊天室

    WebSocket 简介 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主 ...

  8. tornado websocket聊天室

    1.app.py #!/usr/bin/env python # -*- coding:utf-8 -*- import uuid import json import tornado.ioloop ...

  9. 基于springboot的websocket聊天室

    WebSocket入门 1.概述 1.1 Http #http简介 HTTP是一个应用层协议,无状态的,端口号为80.主要的版本有1.0/1.1/2.0. #http1.0/1.1/2.0 1.HTT ...

随机推荐

  1. python 2 和3 的区别

    python 2 和3 的区别 Python2 Python3 打印 print " " print() 输入 raw_input() input() 范围 range/xrang ...

  2. javaweb_HTML

    第一章:网页的构成 1.1概念:b/s与c/s 1.1.1 现在的软件开发的整体架构主要分为B/S架构与C/S架构: b/s:浏览器/服务器 c/s:客户端/服务器 客户端:需要安装在系统里,才可使用 ...

  3. 洛谷 P5639 【CSGRound2】守序者的尊严 题解

    原题链接 简要题意: 从 \(1\) 号位开始走,可以连续走过一段连续的 \(0\) ,每走一次,所有位置取反. (即 \(0 \gets 1\),\(1 \gets 0\)). 算法一 模拟暴力即可 ...

  4. 洛谷 P5596 【XR-4】题 题解

    原题链接 本题只要 推式子 就可以了. \[y^2-x^2=ax + b \] \[a x + x^2 = y^2 - b \] \[4 x^2 + 4 ax = 4 y^2 - 4b \] \[(2 ...

  5. 图-搜索-BFS-DFS-126. 单词接龙 II

    2020-03-19 13:10:35 问题描述: 给定两个单词(beginWord 和 endWord)和一个字典 wordList,找出所有从 beginWord 到 endWord 的最短转换序 ...

  6. 终极解决方案之——Centos7由于误删或更新python导致 No module named yum

    之前由于不懂yum和python之间的关系,因为一直在学python3,看到系统里/usr/lib下的python2我就直接删了,结果... 可能还有人是因为python升级的原因,即系统自带的pyt ...

  7. 阅读了这三篇文章，你也就基本理解了ASP.NET Core MVC框架的工作原理

    <200行代码,7个对象--让你了解ASP.NET Core框架的本质>让很多读者对ASP.NET Core管道有深刻的理解,知道了ASP.NET Core框架针对每个请求的处理流程.在过 ...

  8. Mybatis在xml配置文件中处理SQL中的大于小于号的方法

    之前在项目中遇到了在SQL中<=不识别的问题,在Navicat中语句正常,在xml中不识别,想起来就记录一下 项目用的是Mybatis,经过网上多次查询,验证,总结方法如下: 一.使用<! ...

  9. VMware workstation 下Hadoop伪分布式模式安装

    详细过程: 1.VMware安装: 2.centos 6 安装 3.jdk下载安装配置 4.Hadoop 安装配置 1.VMware Workstation 安装: https://www.vmwar ...

  10. iOS URL schemes

    来源:知乎 launch center pro支持的参数主要有两个,[prompt]文本输入框和[clipboard]剪贴板 淘宝宝贝搜索 taobao://http://s.taobao.com/? ...