前言

什么是websocket？

WebSocket 是一种网络通信协议，就类似于 HTTP 也是一种通信协议。WebSocket是HTML5开始提供的一种在单个TCP 连接上进行全双工（通讯双方既是接收方也是发送方，两端设备可以同时发送和接收数据）通讯的协议。

为什么需要websocket？

因为 HTTP 协议有一个缺陷：HTTP协议只能从客户端发出请求，服务器处理返回请求; 但是服务器不能主动给客户端发送请求，于是解决服务器推送的问题，就只能靠轮询了。

轮询分为两种:

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

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

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

WebSokect 和 HTTP协议有什么区别::

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

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

了解WebSocket 的API

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

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

打印结果如下:

源代码如下:

xml 复制代码

<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 来实现客户端代码

socket.io-client 它是一个基于WebSocket 的 CS（客户端-服务端）的实时通信库，使用它可以在后端提供一个即时通讯服务，它提供的也有一个 JS 库，在前端可以去链接后端 socket.io 创建的服务。

安装:

lua 复制代码

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

如何建立连接

javascript 复制代码

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

如何确定连接成功：

dart 复制代码

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

如何发送消息：

arduino 复制代码

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

如何接收消息：

javascript 复制代码

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

如何关闭消息：

javascript 复制代码

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

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

结尾

WebSocket为现代Web应用程序提供了强大的实时通信能力，为开发者们带来了更多可能性。希望本文对你理解websocket, 并在实际项目中应用WebSocket有所帮助。Happy coding！

逐字稿:

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

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

前言

了解WebSocket 的API

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

结尾