uniapp使用WebSocket实现即时通讯

超级小可爱

发布于 2023-10-18 15:33:38

3.2K0

发布于 2023-10-18 15:33:38

文章被收录于专栏：小孟开发笔记

WebSocket是一种基于TCP协议的全双工通信协议，它可以在客户端和服务器之间建立一个持久性的连接，实现实时通信。在uniapp中，我们可以使用uni-socketio插件来实现WebSocket的功能。

步骤：

1. 安装uni-socketio插件

在HBuilderX中，打开插件市场，搜索uni-socketio插件并安装。

2. 创建WebSocket连接

在需要使用WebSocket的页面中，引入uni-socketio插件并创建WebSocket连接。

import io from '@/uni-socketio'const socket = io('ws://localhost:3000')

其中，’ws://localhost:3000’是WebSocket服务器的地址，可以根据实际情况进行修改。

3. 监听WebSocket事件

在创建WebSocket连接后，我们可以监听WebSocket的事件，例如连接成功、连接断开、接收消息等。

socket.on('connect', () => {console.log('WebSocket连接成功')
})socket.on('disconnect', () => {console.log('WebSocket连接断开')
})socket.on('message', (data) => {console.log('接收到消息：', data)
})

4. 发送消息

使用WebSocket发送消息也很简单，只需要调用socket.emit()方法即可。

socket.emit('message', 'Hello WebSocket')

完整示例代码：

<template><view class="container"><view class="title">WebSocket示例</view><view class="content"><view class="item" v-for="(item, index) in messages" :key="index">{{ item }}</view></view><view class="input"><input type="text" v-model="message" placeholder="请输入消息" /><button @click="sendMessage">发送</button></view></view>
</template><script>
import io from '@/uni-socketio'export default {data() {return {socket: null,messages: [],message: ''}},mounted() {this.initWebSocket()},methods: {initWebSocket() {this.socket = io('ws://localhost:3000')this.socket.on('connect', () => {console.log('WebSocket连接成功')})this.socket.on('disconnect', () => {console.log('WebSocket连接断开')})this.socket.on('message', (data) => {console.log('接收到消息：', data)this.messages.push(data)})},sendMessage() {if (this.message) {this.socket.emit('message', this.message)this.message = ''}}}
}
</script><style>
.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;
}.title {font-size: 24px;font-weight: bold;margin-bottom: 20px;
}.content {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 300px;overflow-y: auto;border: 1px solid #ccc;padding: 10px;margin-bottom: 20px;
}.item {margin-bottom: 10px;
}.input {display: flex;align-items: center;justify-content: center;
}input {width: 200px;height: 30px;margin-right: 10px;padding: 5px;border: 1px solid #ccc;
}button {width: 80px;height: 30px;background-color: #409eff;color: #fff;border: none;border-radius: 5px;cursor: pointer;
}
</style>

以上就是uniapp使用WebSocket实现即时通讯的教程

服务器端推荐php版本的PHPSocket.IO是PHP版本的Socket.IO服务端实现，基于workerman开发

未经允许不得转载：肥猫博客 » uniapp使用WebSocket实现即时通讯

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

websocket