Loading... ## 基本使用 ### node.js后端 #### 下载引入websocket、http模块 ```js const { createServer } = require('http') const { server:Websocket } = require('websocket') ``` #### 创建服务器 ```js const httpServer = createServer().listen(8081, () => { // 启动服务器，设置端口8080 console.log('http://127.0.0.1:8081') }) ``` #### 实例化Websocket，并将httpServer升级成websocket协议 ```js const ws = new Websocket({ httpServer, // 把httpServer升级成websocket协议 autoAcceptConnections: false }) ``` #### 侦听Websocket连接事件 ```js ws.on('request', (request) => { const connection = request.accept() // 当前连接实例 connection.on('message',(msg) => { // 监听客户端的推送事件(msg 请求参数) connection.send(msg.utf8Data) // 响应数据 }) }) ``` > 段落引用每次客户端连接服务器时，都会触发ws实例的request事件，并返回一个连接实例(connection)，在连接实例上有一个message事件用于侦听客户端推送，所返回的数据就是客户端推送的数据 > 连接实例(connection)的send()方法向客户端响应数据 #### 示例 ```js const HTTP = require('http') const { server:Websocket } = require('websocket') const httpServer = HTTP.createServer().listen(8081, () => { // 启动服务器，设置端口8080 console.log('http://127.0.0.1:8081') }) const ws = new Websocket({ httpServer, // 把httpServer升级成websocket协议 autoAcceptConnections: false }) ws.on('request', (request) => { const connection = request.accept() // 当前连接实例 connection.on('message',(msg) => { // 监听客户端的推送事件(msg 请求参数) connection.send(msg.utf8Data) // 响应数据 }) }) ``` #### 技巧-响应所有客户端 将所有连接实例(connection)添加到连接池(connections)中,响应式遍历连接池，触发所有连接实例(connection)的send方法 ### 前端 #### 实例化WebSocket，并传入连接地址 ```js const ws = new WebSocket('ws://127.0.0.1:8081') ``` > ws.readyState ws连接状态 > 段落引用0: 连接还没建立 > 段落引用1: 连接建立完成 > 段落引用2: 连接正在关闭 > 段落引用3: 连接已经关闭 #### 侦听ws连接成功onopen ```js ws.onopen = () => { // 监听连接成功事件 ws.send('msg') // 在连接成功后，可以使用ws实例的send方法向服务器发送请求 } ``` #### 侦听ws连接断开onclose ```js ws.onclose = () => { } ``` #### 侦听ws连接错误onerror ```js ws.onerror = () => { } ``` #### 侦听ws响应事件onmessage ```js ws.onmessage = (msg) => { // 监听服务器响应事件(msg 响应参数) console.log(msg.data) } ``` #### 示例 ```js const ws = new WebSocket('ws://127.0.0.1:8081') // 实例化ws，并传入url地址 /* ws.readyState ws连接状态 0: 连接还没建立 1: 连接建立完成 2: 连接正在关闭 3: 连接已经关闭 */ ws.onopen = () => { // 监听连接成功事件 ws.send('msg') // 向服务器发送请求 } ws.onmessage = (msg) => { // 监听服务器响应事件(msg 响应参数) console.log(msg.data) } ``` ## Socket.io工具库 ### 后端 ```js const { createServer } = require('http') const { Server } = require('socket.io') const httpServer = createServer().listen(8081, () => { // 启动服务器，设置端口8080 console.log('http://127.0.0.1:8081') }) const io = new Server( httpServer, { cors: { origin: '*', // 允许所有跨域请求 methods: ['GET','POST'] } }) io.on('connection', (socket) => { socket.on('自定义事件', (data) => { // data 请求数据 }) socket.emit('客户端自定义事件', { // 响应数据 }) }) io.emit('客户端自定义事件', { // 触发所有连接的自定义事件 // 响应数据 }) ``` ### 前端 ```js import io from 'socket.io' const socket = io.connect('url') // 连接地址 socket.emit('服务器自定义事件', { // 请求数据 }) socket.on('自定义事件', (data) => { // data 响应数据 }) ``` 最后修改：2022 年 12 月 07 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏