前后端实现WebSocket

前端实现WebSocket

<template>
  <h1>你好</h1>
  <button @click="sendMessageBtn">发送：你好</button>
  <button @click="closeSocketBtn">关闭客户端</button>
</template>

<script setup>
import {onMounted} from "vue";
let socket

onMounted(function () {
  // 创建连接
  socket = new WebSocket("ws://127.0.0.1:8000/room/123/")

  // 创建好连接之后自动触发
  socket.onopen = function (event) {
    alert("连接成功")
  }

  // 当websocket接收到服务端发来来的消息时，自动会触发这个函数。
  socket.onMessage = function (event) {
    console.log(event.data)
  }

  // 关闭回调函数
  // socket.onclose = function (event) {
  //
  // }

})

/** 发送信息 **/
function sendMessageBtn(){
  socket.send("你好")
}

/** 关闭socket **/
function closeSocketBtn(){
  socket.close()
}


</script>

<style scoped>

</style>

django实现WebSocket

学习视频：https://www.bilibili.com/video/BV1J44y1p7NX?t=0.5&p=9

1. 下载必要模块，在app中注册"channels"应用

   pip install channels
   

2. settings.py中加入

   ASGI_APPLICATION = "项目名.asgi.application"
   

3. asgi.py文件中（在api应用下创建routing.py，和consumers.py文件，其中前者是路由，后者是视图函数）

   import os
   
   from django.core.asgi import get_asgi_application
   
   from channels.routing import ProtocolTypeRouter, URLRouter
   
   from . import routings
   
   os.environ.setdefault("DJANGO_SETTINGS_MODULE", "learn_flink_api.settings")
   
   application = ProtocolTypeRouter({
       "http": get_asgi_application(),
       'websocket': URLRouter(routings.websocket_urlpatterns)
   })
   

• routing.py文件代码

  from django.urls import re_path
  
  from api import consumers
  
  websocket_urlpatterns = [
      re_path(r'room/(?P<group>\w+)/$', consumers.ChatConsumer.as_asgi())
  ]
  

• consumers.py文件代码

  from channels.exceptions import StopConsumer
  from channels.generic.websocket import WebsocketConsumer
  
  
  class ChatConsumer(WebsocketConsumer):
      def websocket_connect(self, message):
          """ 连接请求 """
          print("有人连接")
          self.accept()
  
      def websocket_receive(self, message):
          """ 接收信息 """
          print("接收信息")
          print(message)
          self.send("不要回复")
  
      def websocket_disconnect(self, message):
          print("断开连接")
          raise StopConsumer()