koa2使用websocket（简单版）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

介绍：

WebSocket 是基于TCP传输协议，服用http的握手通道

一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端中断连接前，不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实现了“真·长链接”，实时性优势明显

使用ws

yarn add ws

yarn add @types/ws //使用typescript的别忘了安装ts的类型定义

ws写在一个单独的文件里 /webSockert/sockert.ts

import WebSocket from "ws"; //引入ws
const wss = new WebSocket.Server({port:3000}) //实例化

type paramtype = {
    send:Function,
}
let param:paramtype


wss.on('connection',function(ws,req){ 
    param=ws
    ws.on('message',function(msg){
        console.log(msg);
    })
   
  })

 export default function getMessage(data:object) {  //暴露出去        
    param.send(JSON.stringify(data))
  }

然后在需要监听的接口中使用这个方法

import getMessage from '../../webSocket/Scocket'

@Controller("auth")  
export default class testController {

  @post("websocket")
  public async add(ctx: Koa.Context) {
    getMessage(ctx.request.body)
      ctx.body="成功"
  }
  
}

我这边封装了一个路由装饰器，自动注册路由

其他小伙伴可以这样写

import getMessage from '../../webSocket/Scocket'
router.post('/auth/websocket',async (ctx)=>{
    getMessage(ctx.request.body)
   ctx.body={
   start:1,
   data:'成功'
   }
})

\

前端部分

对于命令行不太熟悉的小伙伴建议使用vue ui去创建项目

cmd 中输入 vue ui

在左上角点击vue任务管理器

选择创建

这里可以修改创建路径哦

这个demo我是不打算用git的所以初始化git创建就没勾选，包管理器个人比较喜欢用yran

根据自己需求我这边选择手动

这里可以保存预设，下次可以直接使用，我这里就不保存直接创建了，等待一会儿去尿个尿，就创建完了

一分钟后。。。。ok项目创建好了，让我们来开写吧

其他代码就不做展示了

  onMounted(() => {
      const ws = new WebSocket('ws://localhost:3001')    //连接ws
      ws.onmessage = (evt) => {
        console.log(evt.data) //传过来的数据
      }
      ws.onopen = () => {
        console.log('连接成功')
      }
      ws.onerror = () => {
        console.log('连接错误')
      }
      ws.onclose = () => {
        console.log('连接关闭')
      }
    })

测试

让我们在apifox上请求一下/auth/websocket

页面上会打印出