别样网 最近做了一个比较大的改进,当用户搜索不到图片的时候,系统会调用AI系统去全球找图,找到图后再通知当前用户,自然,我们需要推送消息给用户了,移动端推送消息有个推、极光,浏览器,我们有 socket.io 啊!它是在github上有4万加star的项目,github地址:
socket.io ,下面是我用它的一个例子。
1、index.html
<script type="text/javascript" src="./socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('https://push.ssyer.com');
socket.on('message', function(msg) {
alert(msg)
})
socket.on('clientId', function(msg) {
socket.emit('clientId', socket.id);
})
</script>
这里我忽略了css和html,至于socket.io.js 你可以从github下载,具体地址在这里:
点击下载,首先创建连接:
var socket = io.connect('https://push.ssyer.com');
接着监听消息,比如:
socket.on('clientId', function(msg) {
socket.emit('clientId', socket.id);
})
这里,监听的消息的事件名称是 clientId,收到消息后回复服务端,事件名称clientId,内容为id,现在看看后端代码:
'use strict';
const server = require('http').createServer();
const io = require('socket.io')(server, {
pingTimeout: 5000,
pingInterval: 10000,
});
const port = 2100;
io.on('connection', function(socket) {
console.log('===connect id===', socket.id);
socket.emit('clientId', socket.id);
socket.on('disconnect', function() {
console.log('===disconnect id===', socket.id);
// todo remove socket from clients
});
socket.on('message', (data) => {
console.log('===message===', data);
socket.emit('message', 'I received message...');
});
socket.on('clientId', (data) => {
console.log('===clientId received===', data);
socket.emit('message', `I received message ${data}`);
});
});
server.listen(port);
你需要先安装
npm install socket.io --save
代码依旧非常简单,socket.on 是监听事件,第一个值是事件名,第二个是事件值。不过这个 server 是跑在 2100 端口的,你可以通过 nginx 给转发下,然后再弄个免费的 https 证书。其中,connection和disconnect事件会自动调用,即是内置的事件。在客户端连接和断开的时候会调到。而其他比如message、clientId则是我自定义的事件了。
唯一的问题是,socket id每次都会变化,所以你需要自己维护一套id 和socket 对象,以便在后续能做到针对特定用户进行推送。
评论