https://pusher.com/ 是一家国外网站，提供两款产品
Channel 提供设备间，应用间的实时通信，适用于实时图表、实时用户列表、实时地图、多人游戏和许多其他类型的UI更新。
Beams 跨平台的消息推送，iOS, Android and web
产品特点：SDK丰富，集成快速简单，debug调试也很人性。
我们这里指介绍Channel (opens new window)， 先按照官网教程 (opens new window)来个纯JS和PHP的例子 后续会介绍结合一个全新的Laravel6.0项目如何快速引入push消息实时推送功能。
# 步骤
- 注册一个pusher账号
- 创建一个Channel APP
- 获取
app_id，key，secret和cluster - 客户端操作，新建一个html 代码如下，主要引入了pusher.js 初始化push配置
var pusher = new Pusher('APP_KEY', {
cluster: 'APP_CLUSTER'
});
1
2
3
2
3
订阅频道, 频道名为'my-channel'
var channel = pusher.subscribe('my-channel');
监听频道发布消息事件,事件名叫做'my-event'
channel.bind('my-event', function(data) {
alert('An event was triggered with message: ' + data.message);
});
1
2
3
2
3
WARNING
'my-channel'和'my-event'是在后台定义的
<!DOCTYPE html>
<head>
<title>Pusher Test</title>
</head>
<body>
<h1>Pusher Test</h1>
<p>
Publish an event to channel <code>my-channel</code>
with event name <code>my-event</code>; it will appear below:
</p>
<div id="app">
<ul>
<li v-for="message in messages">
{{message}}
</li>
</ul>
</div>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('7b7a4b68e07138fc3b11', {
cluster: 'ap3'
});
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
app.messages.push(JSON.stringify(data));
});
// Vue application
const app = new Vue({
el: '#app',
data: {
messages: [],
},
});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
- 服务端操作，需要安装服务端包
pusher-php-server
// First, run 'composer require pusher/pusher-php-server'
require __DIR__ . '/vendor/autoload.php';
$pusher = new Pusher\Pusher("APP_KEY", "APP_SECRET", "APP_ID", array('cluster' => 'APP_CLUSTER'));
$pusher->trigger('my-channel', 'my-event', array('message' => 'hello world'));
1
2
3
4
2
3
4
- 正常下，每运行一次后台，前台就会多一条记录。
# 参考
https://pusher.com/tutorials/collaborative-note-app-laravel