WebRTC学习(五)WebRTC信令服务器

摘要:
1: 使用插座。io发送消息(1)套接字。io服务器向站点中的所有房间发送广播消息(2)套接字。io客户端处理消息(2)WebRTC信令服务器(1)信令服务器的角色1.媒体相关信息交换:发送SDP描述信息,并通过信令服务器进行传输。
一:使用socket.io发送消息

(一)socket.io服务端发送消息

WebRTC学习(五)WebRTC信令服务器第1张

WebRTC学习(五)WebRTC信令服务器第2张

broadcast会向站点中的所有房间发送消息

(二)socket.io客户端处理消息

WebRTC学习(五)WebRTC信令服务器第3张

WebRTC学习(五)WebRTC信令服务器第4张

二:WebRTC信令服务器

(一)信令服务器(TCP)作用

WebRTC学习(五)WebRTC信令服务器第5张

1.媒体相关信息交换:发送SDP描述信息(是否支持音频、视频,已经对应的编解码信息),通过信令服务器进行中转(因为两个客户端之间还没有建立P2P连接)。
2.网络相关信息交换:建立P2P连接之前的双方信息,也是通过信令服务器进行转发。
3.具体业务信息:房间加入、离开、禁言等等

(二)为什么要使用socket.io(本身具有房间的概念)

WebRTC学习(五)WebRTC信令服务器第6张

(三)socket.io工作原理

WebRTC学习(五)WebRTC信令服务器第7张

三:socket.io实现通信服务器

(一)处理流程

WebRTC学习(五)WebRTC信令服务器第8张

对于客户端连接到服务端以后,会在socket.io的底层触发connection消息,所以服务器只需要处理connection消息

(二)实现通信服务器

socket.io版本降级,解决TypeError: socketIo.listen is not a function

WebRTC学习(五)WebRTC信令服务器第9张WebRTC学习(五)WebRTC信令服务器第10张
'use strict'

var http = require("http");
var https = require("https");
var fs = require("fs");

var express = require("express");
var serveIndex = require("serve-index");

var socketIo = require("socket.io");    //引入socket.io

var log4js = require('log4js');            //开启日志
var logger = log4js.getLogger();
logger.level = 'info';

var app = express();                    //实例化express
app.use(serveIndex("./"));        //设置首路径,url会直接去访问该目录下的文件
app.use(express.static("./"));    //可以访问目录下的所有文件

//https server
var options = {
    key : fs.readFileSync("./ca/learn.webrtc.com-key.pem"),            //同步读取文件key
    cert: fs.readFileSync("./ca/learn.webrtc.com.pem"),                //同步读取文件证书
};

var https_server = https.createServer(options,app);
//绑定socket.io与https服务端
var io = socketIo.listen(https_server);    //io是一个节点(站点),内部有多个房间
https_server.listen(443,"0.0.0.0");
//---------实现了两个服务,socket.io与https server;都是绑定在443,复用端口

//-----处理事件
io.sockets.on("connection",(socket)=>{    //处理客户端到达的socket
    //监听客户端加入、离开房间消息
    socket.on("join",(room)=>{
        socket.join(room);                //客户端加入房间
        //io.sockets指io下面的所有客户端
        //如果是第一个客户端加入房间(原本房间不存在),则会创建一个新的房间
        var myRoom = io.sockets.adapter.rooms[room];    //从socket.io中获取房间
        var users = Object.keys(myRoom.sockets).length;    //获取所有用户数量

        logger.info("the number of user in room is:"+users);

        //开始回复消息,包含两个数据房间和socket.id信息
        //socket.emit("joined",room,socket.id);    //给本人
        //socket.to(room).emit("joined",room,socket.id);    //给房间内其他所有人发消息
        //io.in(room).emit("joined",room,socket.id);        //给房间中所有人(包括自己)发送消息
        socket.broadcast.emit("joined",room,socket.id);    //给节点内其他所有人发消息
    });
    
    socket.on("leave",(room)=>{
        var myRoom = io.sockets.adapter.rooms[room];    //从socket.io中获取房间
        var users = Object.keys(myRoom.sockets).length;    //获取所有用户数量

        logger.info("the number of user in room is:"+(users-1));

        socket.leave(room);    //离开房间
        //开始回复消息,包含两个数据房间和socket.id信息
        socket.broadcast.emit("leaved",room,socket.id);    //给节点内其他所有人发消息
    });

    socket.on("message",(room,msg)=>{
        var myRoom = io.sockets.adapter.rooms[room];    //从socket.io中获取房间
        logger.info("send data is:"+msg);

        socket.broadcast.emit("message",room,socket.id,msg);    //给节点内其他所有人发消息
    });
});
server.js

使用:node server.js启动

WebRTC学习(五)WebRTC信令服务器第11张WebRTC学习(五)WebRTC信令服务器第12张
<html>
    <head>
        <title>    Chat Room </title>
    </head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
    <body>
        <h1>Chat Room</h1>
        <table align="left">
            <tr>
                <td>
                    <label>UserName:</label>
                    <input type="text" id="username"/>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Room:</label>
                    <input type="text" id="room"/>
                    <button id="connect">Connect</button>
                    <button id="leave" disabled>Leave</button>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Content:</label><br/>
                    <textarea disabled id="output" rows="10" cols="50"></textarea>
                </td>
            </tr>            

            <tr>
                <td>
                    <label>Input:</label><br/>
                    <textarea disabled id="input" rows="3" cols="50"></textarea>
                </td>
            </tr>    
            <tr>
                <td>
                    <button id="send">Send</button>
                </td>
            </tr>
        </table>
    </body>
    <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script type="text/javascript" src="./js/chat.js"></script>
    
</html>
ChatRoo..html
WebRTC学习(五)WebRTC信令服务器第13张WebRTC学习(五)WebRTC信令服务器第14张
'use strict'

var userName = document.querySelector("input#username");
var inputRoom = document.querySelector("input#room");
var btnConnect = document.querySelector("button#connect");
var btnLeave = document.querySelector("button#leave");
var outputArea = document.querySelector("textarea#output");
var inputArea = document.querySelector("textarea#input")
var btnSend = document.querySelector("button#send");

var socket;
var room;

btnConnect.onclick = ()=>{
    console.log("connect.....");
    //1.connect
    //当客户端成功加载socket.io客户端文件后会获取到一个全局对象io,我们将通过io.connect函数来向服务端发起连接请求。由html中的script引入
    socket = io.connect();    

    //2.receive message,连接后,添加事件来处理服务端发送的消息
    socket.on("joined",(room,id)=>{
        console.log("joined.....");
        btnConnect.disabled = true;
        inputArea.disabled = false;
        btnSend.disabled = false;
        btnLeave.disabled = false;
    });

    socket.on("leaved",(room,id)=>{
        console.log("leaved.....");
        btnConnect.disabled = false;
        inputArea.disabled = true;
        btnSend.disabled = true;
        btnLeave.disabled = true;
        userName.value = "";
        inputRoom.value = "";
    });

    socket.on("message",(room,id,data)=>{
        outputArea.value = outputArea.value + data +'
';
    });

    //3.send message,加入房间(顺序可以和2交换)
    room = inputRoom.value;
    socket.emit("join",room);
};

btnLeave.onclick = ()=>{
    socket.emit("leave",room);
}

btnSend.onclick = ()=>{
    var data = inputArea.value;
    data = userName.value + ":" +data;
    socket.emit("message",room,data);
};
chat.js

WebRTC学习(五)WebRTC信令服务器第15张

有bug!!!

免责声明:文章转载自《WebRTC学习(五)WebRTC信令服务器》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇WinForm------GridControl的部分属性介绍自己动手写符合自己业务需求的eslint规则下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Java高并发,如何解决,什么方式解决

  对于我们开发的网站,如果网站的访问量非常大的话,那么我们就需要考虑相关的并发访问问题了。而并发问题是绝大部分的程序员头疼的问题,但话又说回来了,既然逃避不掉, 那我们就坦然面对吧~今天就让我们一起来研究一下常见的并发和同步吧。   为了更好的理解并发和同步,我们需要先明白两个重要的概念:同步和异步    1、同步和异步的区别和联系    所谓同步,可以...

人工智能-有限状态机(FSM)的学习

首先声明:此文源于本人最近学习的一本书 《游戏人工智能编程案例精粹》 FSM的定义: 一个有限状态机是一个设备,或是一个设备模型,具有有限数量的状态,它可以在任何给定的时间根据输入进行操作,使得从一个状态变换到另一个状态,或者是促使一个输出或者一种行为的发生。一个有限状态机在任何瞬间只能处在一种状态。 FSM的实现: 不要用if else语句或者switc...

HTTP接口抓包工具之Fiddler

Fiddler的基本功能介绍: Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据,Fiddler包含了一个强大的基于时间脚本的子系统,并且能使用.NET语言进行扩展。对HTTP协议越了解,就能越掌握Fiddler的使用方法。越使用Fiddler,就越能帮助了解...

Nodejs学习笔记(十二)—定时任务(node-schedule)

写在之前 在实际开发项目中,会遇到很多定时任务的工作。比如:定时导出某些数据、定时发送消息或邮件给用户、定时备份什么类型的文件等等 一般可以写个定时器,来完成相应的需求,在node.js中自已实现也非常容易,接下来要介绍的是node-schedule来完成定时任务 下面就用示例来说明一下node-schedule的用法。 node-schedule:htt...

websocket通信 h5flash 兼容ie

H5新功能websocket不用说了,现代浏览器都支持,拿起来就可以用。接下来主要分享下socket通信兼容ie: 方案:flash socket; 前段代码:https://github.com/gimite/web-socket-js; 主要用到里面的3个文件:swfobject.js;web_socket.js;WebSocketMain.swf/W...

go 中使用 electron go ui

JVM运行时的原型写的差不多了,但还是有很多体力活儿要做,思考着未来给PHP,JS,TS,JAVA提供桌面UI的,找了下,还真有! https://github.com/asticode/go-astilectron 这个项目已经用封装好对electron的调用了 拿出demo 一跑就报错,一直没办法下载,,asticode会自动改下载的包的名字,但是又改...