2. websocket的基本使用
创建时间：2023-02-08 14:45
长度：1686
浏览：0
评论：0
H5已经提供了websocket，我们可以直接去使用它的API
前端基本使用
// 演示websocket 在浏览器端(客户端)如何使用
// H5已经提供了websocket，我们可以直接去使用它的API
// 1. 创建websocket
// 参数1：websocket的服务地址
let socket = new WebSocket('ws://echo.websocket.org');
// 2. 绑定一个事件
socket.addEventListener('open', () => {
console.log('连接成功')
})
socket.addEventListener('error', (error) => {
console.log('连接失败', error)
})
socket.addEventListener('message', res => {
console.log(res, '服务器推送的消息')
})
// 3. 主动给websocket服务端发送消息
button.addEventListener('click', function() {
let value = input.value;
socket.send(value);
})google调试
事件
| 事件名 | 解释 |
|---|---|
| close | 当一个 WebSocket 连接被关闭时触发。 也可以通过 onclose 属性来设置 |
| error | 当一个 WebSocket 连接因错误而关闭时触发，例如无法发送数据时。 也可以通过 onerror 属性来设置 |
| message | 当通过 WebSocket 收到数据时触发。 也可以通过 onmessage 属性来设置 |
| open | 当一个 WebSocket 连接成功时触发。 也可以通过 onopen 属性来设置 |
方法
Socket.close(): 关闭连接
Socket.send(); 发送消息
后端基本使用
mkdir websocket-server && cd websocket-server // 并且目录并且进入目录内
npm init -y // 初始化项目
yarn add nodejs-websocket
touch app.js
// app.js
const ws = require('nodejs-websocket');
const PORT = 8000; // 启动端口
// 1. 创建一个server
const server = ws.createServer(connect => {
console.log('有用户连接上来了');
// 用户传递数据过来时，text事件就会触发
connect.on('text', data => {
console.log(data);
// 给用户一个响应数据
connect.send(data);
})
// 只要websocket连接断开，就会触发close事件
connect.on('close', () => {
console.log('用户离开了！')
})
connect.on('error', err => {
console.log('用户连接异常', err)
})
});
// 启动服务
server.listen(PORT, () => {
console.log(`websocket服务启动成功，localhost:${PORT}`)
})
// 启动命令 ps:nodemon是一个node启动工具，相当于node ./app.js, 只不过nodemon 可以监听更新不需要再次敲打命令
nodemon ./app.js给所有用户发送消息
给所有的连接用户发送消息，即通常所说的广播
server.connections.forEach((conn) => {
conn.send(JSON.stringify(msg));
})