【websocket】从理解到精通"socket.io-client"包实时通讯

站长

2023年09月03日 03:53 · 阅读数 23

前言

短轮询：定时发送http请求
长轮询：发送请求直到收到消息或者超时后继续发送下一个请求

// 但是，轮询并不能完美的解决服务器推送的问题

服务器无法主动发送数据
轮询实时性差
轮询浪费较多资源

协议名称不同 ws 和 http
http 一般只能浏览器发起请求，webSocket 可以双端发起请求
WebSocket没有跨域限制
WebSokect通过 send 和 onmessage 通讯;
Http 通过request

【websocket】从理解到精通"socket.io-client"包实时通讯

PS：ws可以升级为wss协议，像http升级到https一样，增加SSL安全协议。

了解WebSocket 的API

此时模拟了点击按钮发送消息,和点击按钮关闭连接通讯场景: 代码截图如下:

【websocket】从理解到精通"socket.io-client"包实时通讯

PS：最关键的是 ws.send 方法去发送消息 , ws.onmessage 事件来接收消息。

打印结果如下:

【websocket】从理解到精通"socket.io-client"包实时通讯

【websocket】从理解到精通"socket.io-client"包实时通讯源代码如下:

<body>
  <button id="ClickPost">发送消息</button>
  <button id="ClickOver">关闭连接</button>
</body>
<script>
// !#1. 创建ws实例，建立连接  (ws://121.40.165.18:8800  有广告)
var ws = new WebSocket("wss://javascript.info/article/websocket/demo/hello");

// !#2. 通过ws.onopen 连接成功,就会自动触发onopen事件
ws.onopen = function(evt) {
    console.log("Connection open ...");
};

ClickPost.onclick= function(){
// !#3. 通过ws.send 发送消息
    ws.send("你好,websocket!")
}

// !#4. 通过ws.onmessage 接收消息事件
ws.onmessage = function(evt) {
    console.log("Received Message: " + evt.data);
};

ClickOver.onclick = function(){
// !#5. 通过ws.close 关闭连接 
  ws.close();
}

// !#6. 通过ws.onclose 关闭连接事件
ws.onclose = function(evt) {
    console.log("Connection closed.");
};
</script>

使用socket.io-client 来实现客户端代码

安装:

npm i socket.io-client  或
pnpm add socket.io-client

如何建立连接

import io from 'socket.io-client'
// 参数1：不传默认是当前服务域名，开发中传入服务器地址
// 参数2：配置参数，根据需要再来介绍
const socket = io()

如何确定连接成功：

socket.on('connect', () => {
// 建立连接成功
})

如何发送消息：

// chat message 发送消息事件，由后台约定，可变
socket.emit('chat message', '消息内容')

如何接收消息：

// chat message 接收消息事件，由后台决定，可变
socket.on('chat message', (ev) => {
// ev 是服务器发送的消息
})

如何关闭消息：

// 离开组件需要使用
socket.close()

socket.on('disconnect', () => {
    console.log('连接关闭')
})

结尾

逐字稿: websocket 是一个类似于HTTP的一种通信协议。不同的是 webscoket 通讯的双方既是接收方也是发送方，(两端设备可以同时发送和接收数据）的一种全双工通讯协议。原生的websocket 使用是先创建ws实例,然后通过ws.send发消息,监听onmessage 事件来接收消息, 不过实际开发中呢,我比较喜欢用socket.io-client 包因为他比较方便些,把这个包调用一下io( )函数,传入后端websocket的接口地址和后端要求的参数,生成一个socket 实例,然后通过socket.emit( 'chat message' , '消息内容' )触发一个事件去发消息,通过socket.on('chat message' , '消息内容' )监听一个事件去接收消息, 'chat message' 事件名称是后端规定的,可以改变;