socket.io

作者: 蘑菇不寂寞 | 来源:发表于2019-05-09 16:12 被阅读0次

    Socket.IO是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用

    socket.io的特点

    易用性:socket.io封装了服务端和客户端,使用起来非常简单方便。

    跨平台:socket.io支持跨平台,这就意味着你有了更多的选择,可以在自己喜欢的平台下开发实时应用。

    自适应:它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,非常方便和人性化,而且支持的浏览器最低达IE5.5。

    安装

    使用npm安装socket.io

    npm install socket.io

    启动一个简单的服务

    新建目录,新建app.js, index.html

    app.js 服务端

    var express = require('express');

    var path = require('path');

    var app = express();

    app.get('/', function (req, res) {

        res.sendFile(path.resolve('index.html'));

    });

    var server = require('http').createServer(app);

    var io = require('socket.io')(server);

    io.on('connection', function (socket) {

        console.log('客户端已经连接');

        socket.on('message', function (msg) {

            console.log(msg);

            socket.send('sever:' + msg);

        });

    });

    server.listen(80);

    index.html 客户端

    服务端运行后会在根目录动态生成socket.io的客户端js文件 客户端可以通过固定路径/socket.io/socket.io.js添加引用 客户端加载socket.io文件后会得到一个全局的对象io connect函数可以接受一个url参数,url可以socket服务的http完整地址,也可以是相对路径,如果省略则表示默认连接当前路径 创建index.html文件

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>socket.io</title>

    </head>

    <body>

        <h2>socket.io</h2>

    <script src="/socket.io/socket.io.js"></script> // 引用脚本,固定写法

    window.onload = function(){

        var socket = io.connect('/');

        //监听与服务器端的连接成功事件

        socket.on('connect',function(){

                    console.log('连接成功');

                });

                //监听与服务器端断开连接事件

                socket.on('disconnect',function(){

                  console.log('断开连接');

                });

            };

    </body>

    </html>

    发送消息

    成功建立连接后,我们可以通过socket对象的send函数来互相发送消息

    修改index.html 如下:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>socket.io</title>

    </head>

    <body>

        <h2>socket.io</h2>

    <script src="/socket.io/socket.io.js"></script> // 引用脚本,固定写法

    window.onload = function(){

        var socket = io.connect('/');

        //监听与服务器端的连接成功事件

        socket.on('connect',function(){

                    console.log('连接成功');

                    //客户端连接成功后发送消息'welcome'

                      socket.send('welcome');

                });

                //客户端收到服务器发过来的消息后触发

                socket.on('message',function(message){

                  console.log(message);

                });

                //监听与服务器端断开连接事件

                socket.on('disconnect',function(){

                  console.log('断开连接');

                });

            };

    </body>

    </html>

    app.js 修改如下

    let express = require('express')

    let http = require('http')

    let app = express()

    app.use(express.static(__dirname))

    app.get('/', function (res, req) {

        res.header('Content-Type', 'text/html;charset=utf8')

        res.sendFile(path.resolve('index.html'))

    })

    let server = http.createServer(app)

    // 因为websocket协议是要依赖http协议实现握手的,所以需要把httpServer的实例传递给socket.io

    let socketIo = require('socket.io')

    let io = socketIo(server)

    // 在服务器监听客户端的链接

    io.on('connection', socket => {

        console.log('客户端连接到服务器')

        // 监听接受客户端发过来的消息

        socket.on('message', msg => {

            console.log('客户端等候扫服务器的消息', msg)

            // 像客户端发送数据

            socket.send(`服务器说:${msg}`)

        })

        socket.on('disconect', function () {

            console.log('断开连接')

        })

        socket.on('error', () => {

            console.log('连接错误')

        })

    })

    server.listen(9999)

    分析

    send函数只是emit的封装

    function send(){

      var args = toArray(arguments);

      args.unshift('message');

      this.emit.apply(this, args);

      return this;

    emit函数有两个参数

    第一个参数是自定义的事件名称,发送方发送什么类型的事件名称,接收方就可以通过对应的事件名称来监听接收

    第二个参数是要发送的数据

    服务端事件

    事件名称 含义

    connection 客户端成功连接到服务器

    message 接收到客户端发送的消息

    disconnect 客户端断开连接

    error 监听错误

    客户端事件

    事件名称 含义

    connect 成功连接到服务器

    message 接收到服务器发送的消息

    disconnect 客户端断开连接

    error 监听错误

    划分命名空间

    可以把服务划分成多个命名空间,默认/不同空间不能通信

    可以把服务分成多个命名空间,默认/,不同空间内不能通信

    io.on('connection', socket => {});

    io.of('/news').on('connection', socket => {});

    客户端链接命名空间

    let socket = io('http://localhost/');

    let socket = io('http://localhost/news');

    房间

    可以把一个命名空间分成多个房间,一个客户端可以同时进入多个房间。

    如果大大厅里广播 ,那么所有在大厅里的客户端和任何房间内的客户端都能收到消息。

    所有在房间里的广播和通信都不会影响到房间以外的客户端

    进入房间

    socket.join('chat');//进入chat房间

    离开房间

    socket.leave('chat');//离开chat房间

    全局广播

    广播就是把消息发送给多个客户端

    向大厅和房间广播

    io.emit('message','全局广播');

    像除了自己之外的其它客户端广播

    socket.broadcast.emit('message', msg);

    房间内广播

    向房间内广播, 从服务器的角度来提交事件,提交者会包含在内

    向myRoom广播一个事件,在此房间内除了自己外的所有客户端都会收到消息

    io.in('myRoom').emit('message', msg);

    io.of('/news').in('myRoom').emit('message',msg);

    向房间内广播, 从客户端的角度来提交事件,提交者会排除在外

    //向myRoom广播一个事件,在此房间内除了自己外的所有客户端都会收到消息

    socket.broadcast.to('myroom').emit('message', msg);

    ---------------------

    作者:Corner1990

    来源:CSDN

    原文:https://blog.csdn.net/weixin_33768153/article/details/84314607

    版权声明:本文为博主原创文章,转载请附上博文链接!

    相关文章

      网友评论

          本文标题:socket.io

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