webrtc学习笔记八(datachannnel同步textarea)

haoningabc

浏览: 1489495 次
性别:
来自: 北京

最近访客更多访客>>

zfyq124

bartontang

dlzdy

cnnlush0605

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

webrtc

webrtc

2020年5月12日更新
出现错误
websocket Failed to execute 'send' on 'WebSocket': Still in CONNECTING state
参考：https://blog.csdn.net/bossxu_/article/details/102977802

原因是
pc.createOffer 的时候websocket还没建立完，socket.send出现问题，
把这段代码加到websocket.onopen事件里就好了：
去掉jquery的版本，直接使用textare的input事件

2020年5月13日更新：
node的server 改成 map的方式，
webrtc6.html
交互原理：https://www.cnblogs.com/cther/p/myPeerConnection.html

<html>
<head></head>
<body>
this connection is :<span id="conn"></span>
<div id="conn_show">
  <a  id="conn_link" href="#">call me</a>
</div></br>
<textarea id="dataChannelSend" >please change me</textarea>
<script>
		window.onload = function () {//dont use jquery
			console.log("onload---->");
			var el = document.getElementById('dataChannelSend');
			el.addEventListener('input',function () {
				console.log("input");
				sendData();
      	  	});
			el.addEventListener('propertychange',function () {//兼容IE
				console.log("property");
				sendData();
      		});
		}
		function getQueryVariable(variable)
		{
		       var query = window.location.search.substring(1);
		       var vars = query.split("&");
		       for (var i=0;i<vars.length;i++) {
		               var pair = vars[i].split("=");
		               if(pair[0] == variable){return pair[1];}
		       }
		       return(false);
		}
		var this_conn = parseInt(Math.random() * 10);
		console.log("connnnnn:"+this_conn);
		console.log("getQueryVariable:"+getQueryVariable('c'));
        var isCaller =getQueryVariable("c");
        var socket = new WebSocket("ws://127.0.0.1:3000");
		var myrole = "callee";
		if(isCaller){//第一个链接显示可以拨打我，第二个链接显示我在拨打
			myrole = "caller";
			this_conn=isCaller;
			document.getElementById("conn_show").innerText="I am a caller";
		}else{
			document.getElementById("conn_link").href="http://localhost:3000?c="+this_conn;
	        document.getElementById("conn_link").target="_blank";
		}
		document.getElementById("conn").innerText=this_conn;
		socket.onopen = function(){ // modify by hao 2020.05.12
			console.log("websocket opening --->");
			socket.send(JSON.stringify({
                        //"name":"123",
                        "name":this_conn,
                        "role":myrole,
                        "event": "connect",//add by hao
                        "data": {}
            }));
		    if(isCaller){
        	    console.log("------->createOffer");
        	    pc.createOffer(function(desc){
        	    	//  console.log(desc);
        	        pc.setLocalDescription(desc);
        	        console.log("---------------->pc.setLocal");
        	        socket.send(JSON.stringify({
						"name":this_conn,
						"role":myrole,
        	            "event": "_offer",
        	            "data": {
        	                "sdp": desc
        	            }
        	        }));
        	    }, function (error) {
        	        console.log('Failure callback: ' + error);
        	    });
        	}else{
			}
		}
        socket.onmessage = function(event){
            var json = JSON.parse(event.data);
            //console.log('onmessage: ', json);
            //如果是一个ICE的候选，则将其加入到PeerConnection中，否则设定对方的session描述为传递过来的描述
            if( json.event === "_ice_candidate" ){
                pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));
            } else {
                pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));
                console.log("---------------->pc.setRemote");
                // 如果是一个offer，那么需要回复一个answer
                if(json.event === "_offer") {
                	console.log("------->createAnswer");
                    pc.createAnswer(function(desc){
			            pc.setLocalDescription(desc);
			            console.log("---------------->pc.setLocal");
			            socket.send(JSON.stringify({
//							"name":"123",
							"name":this_conn,
							"role":myrole,
			                "event": "_answer",
			                "data": {
			                    "sdp": desc
			                }
			            }));
			        }, function (error) {
                        console.log('Failure callback: ' + error);
                    });
                }else{
                	console.log("------->receive Answer---('"+json.event+"')");
                }

            }
        };
        var iceServer = null;
        var pc = new webkitRTCPeerConnection(iceServer,{optional: [{RtpDataChannels: true}]});
        try {
		    sendChannel = pc.createDataChannel('sendDataChannel',{reliable: true});
		} catch (e) {
		    alert('createDataChannel() failed with exception: ' + e.message);
		}
		sendChannel.onopen = console.log('--Send channel open state is : ' +sendChannel.readyState);
  		sendChannel.onclose = console.log('--Send channel close  state is: ' +sendChannel.readyState);
        // 发送ICE候选到其他客户端
        pc.onicecandidate = function(event){
        	console.log("onicecandidate----------->");
            if (event.candidate !== null) {
            	console.log("event.candidate   !=   null");
                socket.send(JSON.stringify({
				//	"name":"123",
					"name":this_conn,
					"role":myrole,
                    "event": "_ice_candidate",
                    "data": {
                        "candidate": event.candidate
                    }
                }));
            }else{
            	console.log("event.candidate   == null");
            }
        };
    	sendChannel.onmessage = function(event) {
    		  console.log("-sendChannel.onmessage--★★★★★");
   			  document.getElementById('dataChannelSend').value = event.data;
		};
//		pc.ondatachannel = function(event) {
//            console.log("-ondatachannel--★★★★★---ondatachannel");
//      };
        function sendData() {
		  var data = document.getElementById('dataChannelSend').value;
		  console.log("---->>>>sendData():"+data);
		  sendChannel.send(data);
		}
    </script>
</body>
</html>

server.js

//http://www.blogjava.net/linli/archive/2014/10/21/418910.html
var express = require('express'),
app = express(),
server = require('http').createServer(app);
server.listen(3000);
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/webrtc6.html');
});
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({server: server});
ws_map = new Map(),
wss.on('connection', function(ws) {
 //   console.log('connection:');
    console.log('connection:\t'+JSON.stringify(ws,null,'\t'));
    ws.on('message', function(message) {
        var json = JSON.parse(message);
        console.log('conn map length: ' + ws_map.size );
        console.log("json:"+json.event+",name:"+json.name+",role:"+json.role);
        var thisrole = "callee";
        var wsname;
        if(json.role!=null && json.role == "caller"){
            wsname=json.name+"callee";
        }else{
            wsname=json.name+"caller";
        }
        if(json.event != 'connect'){
            console.log("wsname:"+wsname);
            var otherwx = ws_map.get(wsname);
            if(otherwx){
                otherwx.send(message, function (error) {
                    if (error) {
                        console.log('Send message error (' + desc + '): ', error);
                    }
                });
            }else{
                console.error("error:not find the connection:"+wsname);
            }
        }else{
            console.log("will add "+json.name+json.role);
            ws_map.set(json.name+json.role,ws)
        }
    });
});

测试：
node server.js

一个浏览器打开：http://localhost:3000/
如果看到connect的数字为 6

另一个浏览器打开：http://localhost:3000/?c=6

体验互相更改的文本

类似www.showmebug.com

分享到：

webrtc学习笔记九 (datachannel在jslinux ... | webrtc学习笔记七(datachannel在jslinux的 ...

2015-10-09 16:47
浏览 1213
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

无需编写任何代码即可创建应用程序：Deepseek-R1 和 RooCode AI 编码代理.pdf: deepseek最新资讯、配置方法、使用技巧，持续更新中

Heric拓扑并网离网仿真模型：PR单环控制，SogIPLL锁相环及LCL滤波器共模电流抑制技术解析,基于Heric拓扑的离网并网仿真模型研究与应用分析：PR单环控制与Sogipll锁相环的共模电流抑: Heric拓扑并网离网仿真模型：PR单环控制，SogIPLL锁相环及LCL滤波器共模电流抑制技术解析,基于Heric拓扑的离网并网仿真模型研究与应用分析：PR单环控制与Sogipll锁相环的共模电流抑制效能,#Heric拓扑并离网仿真模型（plecs）逆变器拓扑为：heric拓扑。仿真说明： 1.离网时支持非单位功率因数负载。 2.并网时支持功率因数调节。 3.具有共模电流抑制能力（共模电压稳定在Udc 2）。此外，采用PR单环控制，具有sogipll锁相环，lcl滤波器。注：（V0004） Plecs版本4.7.3及以上 ,Heric拓扑; 离网仿真; 并网仿真; 非单位功率因数负载; 功率因数调节; 共模电流抑制; 共模电压稳定; PR单环控制; sogipll锁相环; lcl滤波器; Plecs版本4.7.3及以上,Heric拓扑：离网并网仿真模型，支持非单位功率因数与共模电流抑制

培训机构客户管理系统 2024免费JAVA微信小程序毕设: 2024免费微信小程序毕业设计成品，包括源码+数据库+往届论文资料，附带启动教程和安装包。启动教程：https://www.bilibili.com/video/BV1BfB2YYEnS 讲解视频：https://www.bilibili.com/video/BV1BVKMeZEYr 技术栈：Uniapp+Vue.js+SpringBoot+MySQL。开发工具：Idea+VSCode+微信开发者工具。

基于SMIC 40nm工艺库的先进芯片技术,SMIC 40nm工艺库技术细节揭秘：引领半导体产业新革命,smic40nm工艺库 ,smic40nm; 工艺库; 芯片制造; 纳米技术,SMIC 40nm: 基于SMIC 40nm工艺库的先进芯片技术,SMIC 40nm工艺库技术细节揭秘：引领半导体产业新革命,smic40nm工艺库 ,smic40nm; 工艺库; 芯片制造; 纳米技术,SMIC 40nm工艺库：领先技术驱动的集成电路设计基础

2013年上半年软件设计师上午题-真题及答案解析: 2013年上半年软件设计师上午题-真题及答案解析

淮南市乡镇边界，shp格式: shp格式，可直接导入arcgis使用

ROS下的移动机器人路径规划算法：基于强化学习算法DQN、DDPG、SAC及TD3的实践与应用,ROS系统中基于强化学习算法的移动机器人路径规划策略研究：应用DQN、DDPG、SAC及TD3算法,RO: ROS下的移动机器人路径规划算法：基于强化学习算法DQN、DDPG、SAC及TD3的实践与应用,ROS系统中基于强化学习算法的移动机器人路径规划策略研究：应用DQN、DDPG、SAC及TD3算法,ROS下的移动机器人路径规划算法，使用的是强化学习算法 DQN DDPG SAC TD3等 ,ROS; 移动机器人; 路径规划算法; DQN; DDPG; SAC; TD3,ROS强化学习移动机器人路径规划算法研究

粒子群优化算法精准辨识锂电池二阶RC模型参数：高仿真精度下的SOC估计铺垫,粒子群优化算法精准辨识锂电池二阶RC模型参数：仿真验证与SOC估计铺垫,使用粒子群优化算法（PSO）辨识锂电池二阶RC模型参: 粒子群优化算法精准辨识锂电池二阶RC模型参数：高仿真精度下的SOC估计铺垫,粒子群优化算法精准辨识锂电池二阶RC模型参数：仿真验证与SOC估计铺垫,使用粒子群优化算法（PSO）辨识锂电池二阶RC模型参数（附MATLAB代码）使用粒子群优化算法来辨识锂离子电池二阶RC模型的参数。将粒子群优化算法寻找到的最优参数代入二阶RC模型进行仿真，经过验证，端电压的估计误差小于0.1%，说明粒子群优化算法辨识得到的参数具有较高的精度，为锂离子电池SOC的估计做铺垫。 ,关键词：粒子群优化算法（PSO）; 锂电池二阶RC模型参数辨识; MATLAB代码; 端电压估计误差; 锂离子电池SOC估计。,PSO算法优化锂电池二阶RC模型参数：高精度仿真与MATLAB代码实现

selenium环境搭建-谷歌浏览器驱动: selenium环境搭建-谷歌浏览器驱动

35页-华为智慧社区商业解决方案.pdf: 在当今科技日新月异的时代，智慧社区的概念正悄然改变着我们的生活方式。它不仅仅是一个居住的空间，更是一个集成了先进科技、便捷服务与人文关怀的综合性生态系统。以下是对智慧社区整体解决方案的精炼融合，旨在展现其知识性、趣味性与吸引力。一、智慧社区的科技魅力智慧社区以智能化设备为核心，通过综合运用物联网、大数据、云计算等技术，实现了社区管理的智能化与高效化。门禁系统采用面部识别技术，让居民无需手动操作即可轻松进出；停车管理智能化，不仅提高了停车效率，还大大减少了找车位的烦恼。同时，安防报警系统能够实时监测家中安全状况，一旦有异常情况，立即联动物业进行处理。此外，智能家居系统更是将便捷性发挥到了极致，通过手机APP即可远程控制家中的灯光、窗帘、空调等设备，让居民随时随地享受舒适生活。视频监控与可视对讲系统的结合，不仅提升了社区的安全系数，还让居民能够实时查看家中情况，与访客进行视频通话，大大增强了居住的安心感。而电子巡更、公共广播等系统的运用，则进一步保障了社区的治安稳定与信息传递的及时性。这些智能化设备的集成运用，不仅提高了社区的管理效率，更让居民感受到了科技带来的便捷与舒适。二、智慧社区的增值服务与人文关怀智慧社区不仅仅关注科技的运用，更注重为居民提供多元化的增值服务与人文关怀。社区内设有互动LED像素灯、顶层花园控制喷泉等创意设施，不仅美化了社区环境，还增强了居民的归属感与幸福感。同时，社区还提供了智能家居的可选追加项，如空气净化器、远程监控摄像机等，让居民能够根据自己的需求进行个性化选择。智慧社区还充分利用大数据技术，对居民的行为数据进行收集与分析，为居民提供精准化的营销服务。无论是周边的商业信息推送，还是个性化的生活建议，都能让居民感受到社区的智慧与贴心。此外，社区还注重培养居民的环保意识与节能意识，通过智能照明、智能温控等系统的运用，鼓励居民节约资源、保护环境。三、智慧社区的未来发展与无限可能智慧社区的未来发展充满了无限可能。随着技术的不断进步与创新，智慧社区将朝着更加智能化、融合化的方向发展。比如，利用人工智能技术进行社区管理与服务，将能够进一步提升社区的智能化水平；而5G、物联网等新技术的运用，则将让智慧社区的连接更加紧密、服务更加高效。同时，智慧社区还将更加注重居民的体验与需求，通过不断优化智能化设备的功能与服务，让居民享受到更加便捷、舒适的生活。未来，智慧社区将成为人们追求高品质生活的重要选择之一，它不仅是一个居住的空间，更是一个融合了科技、服务、人文关怀的综合性生态系统，让人们的生活更加美好、更加精彩。综上所述，智慧社区整体解决方案以其科技魅力、增值服务与人文关怀以及未来发展潜力，正吸引着越来越多的关注与认可。它不仅能够提升社区的管理效率与居民的生活品质，更能够为社区的可持续发展注入新的活力与动力。

PowerSettingsExplorer.rar: PowerSettingsExplorer.rar 电脑的电源管理软件，明白的不多说。自己搜索即可知道。

2025年开源人工智能：关键参与者与预测.pdf: deepseek最新资讯，配置方法，使用技巧，持续更新中

DeepSeek 发布 Janus Pro AI 图像生成器 – 开源且免费.pdf: deepseek最新资讯、配置方法、使用技巧，持续更新中

消息中间件rabbitmq-server: RabbitMQ 是一个开源的消息代理（Message Broker），实现了 AMQP（Advanced Message Queuing Protocol）协议，用于在分布式系统中实现高效、可靠的消息传递。

西门子S7-1200与汇川PLC新通信选择：Ethernet IP通信的突破与优势，功能安全及精准同步的创新实践 ,西门子S7-1200与汇川PLC通信新选择：Ethernet IP通信方案亮相，替代: 西门子S7-1200与汇川PLC新通信选择：Ethernet IP通信的突破与优势，功能安全及精准同步的创新实践。,西门子S7-1200与汇川PLC通信新选择：Ethernet IP通信方案亮相，替代Modbus TCP实现更高级功能与安全控制。,西门子PLC和汇川PLC新通信选择-西门子S7-1200 1500系列PLC也开始支持Ethernet IP通信了。这为西门子系列的PLC和包括汇川AM400 600等Codesys系PLC的通信提供了新的解决方案。当前两者之间的通信大多采用ModBus TCP通信。 Modbus TCP和EtherNet IP的区别主要是应用层不相同，ModbusTCP的应用层采用Modbus协议，而EtherNetIP采用CIP协议，这两种工业以太网的数据链路层采用的是CSMACCD，因此是标准的以太网，另外，这两种工业以太网的网络层和传输层采用TCPIP协议族。还有一个区别是，Modbus协议中迄今没有协议来完成功能安全、高精度同步和运功控制等，而EtherNet IP有CIPSatety、ClIP Sync和ClPMotion来

自适应无迹卡尔曼滤波AUKF算法：系统估计效果展示与特性分析（含MATLAB代码与Excel数据）,自适应无迹卡尔曼滤波AUKF算法：系统估计效果展示与特性分析（含MATLAB代码与Excel数据）: 自适应无迹卡尔曼滤波AUKF算法：系统估计效果展示与特性分析（含MATLAB代码与Excel数据）,自适应无迹卡尔曼滤波AUKF算法：系统估计效果展示与特性分析（含MATLAB代码与Excel数据）,自适应无迹卡尔曼滤波AUKF算法配套文件包含MATLAB代码+excel数据+学习资料估计效果与系统特性有关，图片展示为一复杂系统估计效果 ,AUKF算法; MATLAB代码; excel数据; 学习资料; 估计效果; 系统特性。,自适应无迹卡尔曼滤波AUKF算法：MATLAB代码与学习资料

基于MATLAB Simscape的IGBT开关特性模型：揭示开关损耗、米勒平台及瞬态行为的分析工具,IGBT开关特性模型与MATLAB Simscape模拟：深入理解开关行为及损耗数据,IGBT开关: 基于MATLAB Simscape的IGBT开关特性模型：揭示开关损耗、米勒平台及瞬态行为的分析工具,IGBT开关特性模型与MATLAB Simscape模拟：深入理解开关行为及损耗数据,IGBT开关特性模型，MATLAB Simscape模型。该模型展示了IGBT的详细的开关模型，用于创建开关损耗列表数据。有助于理解IGBT米勒平台、瞬态开关行为。也可以用于MOOSFET。 ,IGBT开关模型; MATLAB Simscape; 开关损耗; 米勒平台; 瞬态开关行为; MOOSFET。,MATLAB Simscape中IGBT精细开关模型：揭示米勒平台与瞬态行为

基于卷积神经网络CNN的多输入单输出数据回归预测-含详细注释与多种评估指标（R2、MAE、MBE）,基于卷积神经网络CNN的多输入单输出数据回归预测模型详解-附代码注释、指标评估及Excel数据处: 基于卷积神经网络CNN的多输入单输出数据回归预测——含详细注释与多种评估指标（R2、MAE、MBE）,基于卷积神经网络CNN的多输入单输出数据回归预测模型详解——附代码注释、指标评估及Excel数据处理方法,基于卷积神经网络CNN的数据回归预测多输入单输出预测代码含详细注释，不负责数据存入Excel，替方便，指标计算有决定系数R2，平均绝对误差MAE，平均相对误差MBE ,基于卷积神经网络CNN; 数据回归预测; 多输入单输出; 详细注释; Excel存储; 指标计算(R2; MAE; MBE); 不负责。,基于CNN的卷积数据回归预测模型：多输入单输出代码详解与性能评估

四六级词汇系统 2024免费JAVA微信小程序毕设: 2024免费微信小程序毕业设计成品，包括源码+数据库+往届论文资料，附带启动教程和安装包。启动教程：https://www.bilibili.com/video/BV1BfB2YYEnS 讲解视频：https://www.bilibili.com/video/BV1BVKMeZEYr 技术栈：Uniapp+Vue.js+SpringBoot+MySQL。开发工具：Idea+VSCode+微信开发者工具。

如何解决未收到 DeepSeek AI 验证码（注册码问题）.pdf: deepseek最新资讯、配置方法、使用技巧，持续更新中

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论