Socket.io 的使用 - nodejs 使用 Socket.io 推送消息给浏览器

别样网 最近做了一个比较大的改进,当用户搜索不到图片的时候,系统会调用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 对象,以便在后续能做到针对特定用户进行推送。

本博客若无特殊说明则由 full-stack-trip 原创发布
转载请点名出处:全栈之旅 > Socket.io 的使用 - nodejs 使用 Socket.io 推送消息给浏览器
本文地址:https://www.kpromise.top/use-socket-io-to-push-message-to-browser/

发表评论

电子邮件地址不会被公开。 必填项已用*标注