一、websocket简介
WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。WebSocket应用程序可以通过websockets连接与远程计算机进行双向通信。
WebSocket的连接是通过HTTP协议实现握手的,握手成功后,数据将以原始数据进行传输。
二、uni-app中websocket的应用场景
uni-app是一个使用Vue.js编写的跨平台应用开发框架,可生成多平台的应用。在uni-app中,服务器与客户端使用websocket进行通信的场景非常常见,比如实时聊天、在线游戏、实时数据展示等。
三、uni-app中websocket的使用
1. 前端代码示例
// 创建websocket连接
let socketTask = uni.connectSocket({
url: 'ws://localhost:8080',
success: () => {
console.log('连接成功')
}
})
// 发送数据
socketTask.send({
data: 'hello world'
})
// 监听websocket打开事件
socketTask.onOpen(() => {
console.log('WebSocket已连接')
})
// 监听websocket关闭事件
socketTask.onClose(() => {
console.log('WebSocket已关闭')
})
// 监听websocket接收消息事件
socketTask.onMessage(callback)
// 断开websocket连接
socketTask.close()
2. 后端代码示例
const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 8080 })
console.log('WebSocket server listening on port 8080')
wss.on('connection', (ws) => {
console.log('WebSocket connection open')
// 发送数据到客户端
ws.send('连接成功')
// 监听客户端发送消息事件
ws.on('message', (data) => {
console.log('Received message:', data)
// 将消息发送到客户端
ws.send(`You said: ${data}`)
})
// 监听websocket关闭事件
ws.on('close', () => {
console.log('WebSocket connection closed')
})
})
四、websocket的优势和不足
优势:
1、实时性更好:websocket采用双向通信,相比传统的HTTP请求响应模式,实时性更好,让前端可以在接收到消息后实时更新。
2、提升性能:单个TCP连接可以实现并发性。
3、节省网络流量:相比一直发送HTTP请求,websocket可以进行长时间的通信,节省了网络流量。
不足:
1、浏览器兼容性:虽然WebSocket是HTML5的一部分,但是在某些浏览器上,特别是移动端浏览器上可能不支持。
2、需要维护长连接:websocket需要保持长连接,会增加服务器端的负担,需要更多的硬件资源。
五、总结
使用websocket可以让前端与后端实现双向通信,实时性更好、性能更佳,对于实时性要求较高的应用非常适用。不过在使用websocket时需要注意一些浏览器兼容性问题和服务器负担问题。