美文网首页Web 前端开发 让前端飞我爱编程
IM聊天室(二):Socket.io + Node.js

IM聊天室(二):Socket.io + Node.js

作者: 松饼水果十指鱼 | 来源:发表于2017-12-22 21:27 被阅读38次

    前言

    IM即时聊天室(一)中,我们了解了WebSocket的相关知识和基础API作为编写聊天室的基础。那么作为进阶篇,今天我们就来讲一讲Socket.io,欢迎到我的个人博客查看原帖。


    1、什么是Socket.io?

    简单来说,Socket.io封装了WebSocket以及其他的一些协议,是一个完全由JavaScript实现、基于Node.js、支持WebSocket的协议用于实时通信、跨平台的开源框架。

    它包括了客户端的JavaScript和服务器端的Node.js并且实现了WebSocket的服务端代码。同时还有很强的兼容性,兼容各种浏览器以及移动设备。有了它,我们能更方便快捷地实现服务器端与客户端之间的实时通讯。


    2、使用Socket.io(初始化)

    服务端搭建:

    服务端我使用的是Node.js,安装的话就直接点左边的链接下载对应的安装包就好啦,Linux稍麻烦一点需要配置一下node和npm的全局执行环境,网上有很多的教程,在这里就不赘述了。

    安装好Node.js后,创建一个文件夹作为项目文件夹,定位到刚建的文件夹下,输入npm install socket.io安装Socket.io

    安装完成之后,可以看到文件夹下多了node_modules文件,里面全是刚下载的socket.io依赖包。

    初始化服务端:

    创建一个app.js文件作为服务端代码

    /*app.js*/
    
    /*构建http服务*/
    var app = require('http').createServer()
    
    /*引入socket.io*/
    var io = require('socket.io')(app);
    
    /*定义监听端口,可以自定义,端口不要被占用*/
    var PORT = 8081;
    
    /*监听端口*/
    app.listen(PORT);
    
    /**
    *监听客户端连接
    *io是我们定义的服务端的socket
    *回调函数里面的socket是本次连接的客户端socket
    *io与socket是一对多的关系
    */
    io.on('connection', function (socket) {
      /*所有的监听on,与发送emit都得写在连接里面,包括断开连接*/
    })
    
    

    对比WebSocket服务端初始化代码:

    // 导入WebSocket模块:
    const WebSocket = require('ws');
    
    // 引用Server类:
    const WebSocketServer = WebSocket.Server;
    
    // 实例化: 在3000端口上打开一个WebSocket Server
    const wss = new WebSocketServer({
        port: 3000
    });
    
    //监听connection事件
    wss.on('connection', function (ws){
        /**
        *监听客户端事件
        *回调函数里面的socket是本次连接的客户端socket
        *io与socket是一对多的关系
        */
    });
    

    WebSocket流程:导入Websocket模块 - 创建server - 在自定义端口创建实例 - 在该端口监听事件
    Socket.io流程: 导入http模块 - 创建HttpServer - 基于HttpServer创建Socket.io实例 - 在自定义端口监听事件

    可以看到,Socket.io的服务端初始化代码和WebSocket相比,流程相近。那么Socket.io的优势在哪呢?

    1.Socket.IO已经具有众多强大功能的模块和扩展API

    2.Socket.IO实现了实时、双向、基于事件的通讯机制,它解决了实时的通信问题,并统一了服务端与客户端的编程方式。启动了Socket以后,就像建立了一条客户端与服务端的管道,两边可以互通有无。

    接下来是初始化客户端:

    /**
    *客户端初始化非常简单
    *只需要创建一个实例并指向目标服务器,注意端口要与服务器端保持一致
    */
    var socket = io('ws://localhost:8081');
    
    //WebSocket客户端初始化代码:
    var ws = new WebSocket("ws://localhost:3000");
    

    3、使用Scoket.io(API函数介绍)

    **

    1、客户端部分:

    **

    • 客户端向服务器端发送消息
      例如客户端向服务端发送登录请求
    //login是自定义的事件,后面是带的参数
    socket.emit('login',{username:uname})
    
    • 监听服务端发来的信息
    socket.on('String',function(data))
    
    • 给除了自己以外的客户端广播消息
    socket.broadcast.emit
    

    **

    2、服务端部分:

    **

    • 监听客户端连接,回调函数会传递本次连接的socket,下面列出的函数都要写在这个函数里
    io.on('connection',function(socket));
    
    • 给指定的客户端发送消息
    io.sockets.socket(socketid).emit('String', data);
    
    • 给所有客户端广播消息
    io.sockets.emit('String',data);
    
    • 给该socket的客户端发送消息
    socket.emit('String', data);                                              
    
    • 监听客户端发送的信息
    socket.on('String',function(data));
    

    相关文章

      网友评论

        本文标题:IM聊天室(二):Socket.io + Node.js

        本文链接:https://www.haomeiwen.com/subject/hanxgxtx.html