如何快速搞定websocket
5 个步骤快速掌握websocket消息发送和接收
1. 获取您的 appkey
先注册一个账号,登录后,创建一个应用,就能得到您的 appkey。
详情见 获取开发者账号和 appkey
2. 客户端集成 irealtime.js
直接在页面中引用
<script
type="text/javascript"
src="https://irealtime.cn/irealtime-1.0.1.js"
></script>
npm 安装
npm install --save irealtime
import IRealTime from 'irealtime';
下载到本地
3. 初始化 irealtime
使用之前获取的 appkey 初始化 irealtime 对象,如果您的客户端需要发送消息,请使用 common key。如果您的客户端只需要接收消息,不需要发送消息,可以使用 subscriber key。
提示:
一个页面或一个单页面应用,一个小程序或者一个 APP, 只需要初始化一个 irealtime 对象
<script
type="text/javascript"
src="https://irealtime.cn/irealtime-1.0.1.js"
></script>
<script type="text/javascript">
var realTime = new IRealTime({
host: 'hk.irealtime.cn',
appkey: '' // common key or subscribe key,
onConnected: function() {
console.log('连接成功...')
},
onDisconnected: function() {
console.log('连接断开...')
},
onConnectFailed: function(error) {
console.log('连接失败...', error)
},
})
</script>
4. 订阅消息(接收)
在发送消息之前,您需要先完成订阅操作, 来准备接收消息。
什么是 channels?
根据您的业务需求来设定,channels是一个数组参数,只能包含数字大小写字母并且不能超过256位,通道需要和消息的发送端保持一致,就可以收到消息。
realTime.subscribe({
channels: ['myChannel01', 'myChannel02'], //可配置多个channel
onMessage: function(data) { // 这个回调函数是用来接收消息的
console.log(data)
// data的数据结构如下
/*{
channel: "myChannel01" // 哪个通道的消息
message: "hello irealtime" // 消息内容
time: 1612403977920 // 发送的时间毫秒数
userId: "" // 带userId的连接,如果没有就是空字符串
}*/
},
onSuccess: function(res) {
console.log('订阅成功...', res)
},
onFailed: function(error) {
console.log('订阅失败...', error)
},
})
5. 发送消息
发送时,您的 channel 必须和上一步订阅的 channel 一致,才可以成功的接收消息。不论是服务端还是客户端,您都可以使用 irealtime 提供的相应代码来完成发送操作。同时也可以使用 curl 直接在控制台调用 irealtime API 来测试 irealtime 的 publish 接口。
realTime.publish({
channel: 'myChannel01',
message: 'hello irealtime',
onSuccess: function(res) {
console.log('success:', res)
},
onFailed: function(error) {
console.log('failed:', error)
},
})
相信通过上边几个步骤,您已经成功的完成 irealtime 消息的发送和接收。更多详情,可以参考 irealtime 官方文档
遇到技术问题也可以与 irealtime 技术支持取得联系。