webSocket

简介

他是除了http之外可以跟后端通信的方式。

http请求和ws请求的区别：

http:要是客户端不发送请求 后端没办法返回数据。

ws:只要建立一次链接（持久连接），如果服务端给客户端数据 可以直接给 不需要先传过来。

http协议是短链接，因为请求之后，都会关闭连接，下次重新请求数据，需要再次打开连接。WebSocket协议是一种长连接，只需要通过一次请求来初始化链接，然后所有的请求和响应都是通过这个TCP链接进行通信。

用法

客户端实现：使用  WebSocket()构造函数来构造一个 WebSocket。

var ws = new WebSocket(url)请求的地址url

 WebSocket事件：

ws.onOpen：连接建立时触发

ws.onMessage：客户端接收服务器数据时触发

ws.onerror：通信出错

ws.onclose：连接关闭

 WebSocket方法：

send()：使用连接发送数据

使用nodejs练习WebSocket

1.安装ws : npm i ws

客户端：

<script setup>

// url格式：ws://ip地址：端口号

// 1.实例化

let ws = new WebSocket('ws://localhost:10086')

// 2.成功连接

ws.onopen=()=>{

  ws.send(1111111111)

console.log("客户端--连接成功")

}

ws.onmessage=(data)=>{

  // 服务端给客户端的数据

  console.log("客户端--接收消息",data)

}

ws.οnerrοr=()=>{

  console.log("客户端--连接错误")

}

ws.onclose=()=>{

  console.log("客户端--连接关闭")

}

</script>

服务器：

var express = require('express');

var router = express.Router();

// 引入ws模块

const WebSocket = require('ws').Server;

// 设置端口号

const port= 10086

// 1.创建WebSocket服务器

const server = new WebSocket({port},()=>{

  console.log("WebSocket服务正式开启");

})

const errorhandle = (error)=>{

console.log("连接出错了！",error)

}

const closehandle = ()=>{

  console.log("连接断开了！")

}

// const messagehandle = (data)=>{

//   console.log("客户端来消息了！",JSON.parse(data))

//   this.send(JSON.parse(data))

// }

function messagehandle(data){

  console.log("客户端来消息了！",JSON.parse(data))

  this.send(JSON.parse(data))

}

// const openhandle = ()=>{

//   console.log("连接打开了！")

// }

// 建立连接

// 创建了一个WebSocket服务器，监听10086端口。

// 当有客户端连接到服务器时，服务器会触发connection事件，我们可以在事件处理程序中处理连接事件。

server.on("connection",(ws)=>{

  console.log("客户端连接了！");

  // 客户端的监听

  ws.on('error',errorhandle)

  ws.on('close',closehandle)

  ws.on('message',messagehandle)

  // ws.on('open',openhandle)

})

 

/* GET home page. */

router.get('/', function(req, res, next) {

  res.render('index', { title: 'Express' });

});

module.exports = router;

WebSocket心跳机制和断线重连