webrtc学习笔记七(datachannel在jslinux的应用,nodejs版本)

haoningabc

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

最近访客更多访客>>

zfyq124

bartontang

dlzdy

cnnlush0605

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

webrtc
linux

datachannel webrtc jslinux

目标：
两个浏览器的jslinux可以进行数据交互

fabrice的jslinux是跑在浏览器中的linux，
提供了通过
/dev/clipboard 与<textare>交互的功能，交互的方法是clipboard_set

可以在jslinux.js中的clipboard_set方法中加入
datachannel的send方法，使两个浏览器中的textare有数据同步
从而是jslinux中通过一个linux的clipboard与另一个jslinux的clipboard交互

jslinux.js中修改的代码：

/* 
   Linux launcher

   Copyright (c) 2011-2012 Fabrice Bellard

   Redistribution or commercial use is prohibited without the author's
   permission.
*/
"use strict";

var term, pc, boot_start_time, init_state;

function term_start()
{
    term = new Term(80, 130, term_handler);

    term.open();
}

/* send chars to the serial port */
function term_handler(str)
{
    pc.serial.send_chars(str);
}
console.log("hao:version 1.2")
function clipboard_set(val)
{
	console.log("hao:clipboard_set---sendData->");
	
    var el;
    el = document.getElementById("text_clipboard");
    el.value = val;
    sendData();
}

function clipboard_get()
{
	console.log("hao:clipboard_get---->");
    var el;
    el = document.getElementById("text_clipboard");
    return el.value;
}

function clear_clipboard()
{
    var el;
    el = document.getElementById("text_clipboard");
    el.value = "";
}

/* just used to display the boot time in the VM */
function get_boot_time()
{
    return (+new Date()) - boot_start_time;
}

function start()
{
    var params;
    
    init_state = new Object();

    params = new Object();

    /* serial output chars */
    params.serial_write = term.write.bind(term);

    /* memory size (in bytes) */
    params.mem_size = 16 * 1024 * 1024;

    /* clipboard I/O */
    params.clipboard_get = clipboard_get;
    params.clipboard_set = clipboard_set;

    params.get_boot_time = get_boot_time;

    /* IDE drive. The raw disk image is split into files of
     * 'block_size' KB. 
     */
    params.hda = { url: "bin/hda%d.bin", block_size: 64, nb_blocks: 912 };
    
    pc = new PCEmulator(params);

    init_state.params = params;

    //pc.load_binary("vmlinux-2.6.20.bin", 0x00100000, start2);
    //pc.load_binary("vmlinux26.bin", 0x00100000, start2);
//    pc.load_binary("vmlinuxtest.bin", 0x00100000, start2);
    //pc.load_binary("vmlinuxnono.bin", 0x00100000, start2);
    //pc.load_binary("vmlinux319.bin", 0x00100000, start2);
    pc.load_binary("vmlinux319clip.bin", 0x00100000, start2);
}

function start2(ret)
{
    if (ret < 0)
        return;
    init_state.start_addr = 0x10000;
    //pc.load_binary("linuxstartnew.bin", init_state.start_addr, start3);
    pc.load_binary("linuxstart.bin", init_state.start_addr, start3);
}

function start3(ret)
{
    var block_list;
    if (ret < 0)
        return;
    /* Preload blocks so that the boot time does not depend on the
     * time to load the required disk data (optional) */
    block_list = [ 0, 7, 3, 643, 720, 256, 336, 644, 781, 387, 464, 475, 131, 589, 468, 472, 474, 776, 777, 778, 779, 465, 466, 473, 467, 469, 470, 512, 592, 471, 691, 697, 708, 792, 775, 769 ];
    pc.ide0.drives[0].bs.preload(block_list, start4);
}

function start4(ret)
{
    var cmdline_addr;

    if (ret < 0)
        return;

    /* set the Linux kernel command line */
    cmdline_addr = 0xf800;
    pc.cpu.write_string(cmdline_addr, "console=ttyS0 root=/dev/hda ro init=/sbin/init notsc=1 hdb=none");

    pc.cpu.eip = init_state.start_addr;
    pc.cpu.regs[0] = init_state.params.mem_size; /* eax */
    pc.cpu.regs[3] = 0; /* ebx = initrd_size (no longer used) */
    pc.cpu.regs[1] = cmdline_addr; /* ecx */

    boot_start_time = (+new Date());

    pc.start();
}

term_start();

jslinux的html修改的代码：

<!DOCTYPE html>
<html>
<head>
<title>Javascript PC Emulator</title>
<style>
.term {
    font-family: courier,fixed,swiss,monospace,sans-serif;
    font-size: 14px;
    color: #f0f0f0;
    background: #000000;
}

.termReverse {
    color: #000000;
    background: #00ff00;
}
#note {
    font-size: 12px;
}
#copyright {
    font-size: 10px;
}
#clipboard {
    font-size: 12px;
}
</style>
</head>
<body >
<table border="0">
<tr valign="top"><td>
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="term.js"></script>
<script type="text/javascript" src="cpux86.js"></script>
<script type="text/javascript" src="jslinux.js"></script>


<div id="copyright">&copy; 2011 Fabrice Bellard - <a href="news.html">News</a> - <a href="faq.html">FAQ</a> - <a href="tech.html">Technical notes</a></div>
<input type="button" value="Clear clipboard" onclick="clear_clipboard();"><br><textarea row="4" cols="16" id="text_clipboard" ></textarea></br>
<input type="button" value="addletter" onclick="addletter();">
<input type="button" value="start" onclick="start();">


</table>
<script type="text/javascript" >
		
		function addletter(){
			document.getElementById("text_clipboard").value=document.getElementById("text_clipboard").value+"a";
		}
		$('#text_clipboard').bind('input propertychange', function() {  
		    //$('#result').html($(this).val().length + ' characters');  
		    sendData();
		});
		var iceServer = null;
		var pc = new window.webkitRTCPeerConnection(iceServer,{optional: [{RtpDataChannels: true}]});
		
        var isCaller = window.location.href.split('#')[1];
        var socket = new WebSocket("ws://192.168.137.27:3000");
        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({ 
			                "event": "_answer",
			                "data": {
			                    "sdp": desc
			                }
			            }));
			        }, function (error) {
                        console.log('Failure callback: ' + error);
                    });
                }else{
                	console.log("------->receive Answer---('"+json.event+"')");
                }
                
            }
        };
        
        
        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({
                    "event": "_ice_candidate",
                    "data": {
                        "candidate": event.candidate
                    }
                }));
            }else{
            	console.log("event.candidate   == null");
            }
        };
    	sendChannel.onmessage = function(event) {
    		  console.log("-sendChannel.onmessage--★★★★★");
   			  document.getElementById('text_clipboard').value = event.data;
		};
        function sendData() {
		  var data = document.getElementById('text_clipboard').value;
		  console.log("---->>>>sendData():"+data);
		  sendChannel.send(data);
		}
		if(isCaller){
        	console.log("------->createOffer");
            pc.createOffer(function(desc){
            //	console.log(desc);
	            pc.setLocalDescription(desc);
	            console.log("---------------->pc.setLocal");
	            socket.send(JSON.stringify({ 
	                "event": "_offer",
	                "data": {
	                    "sdp": desc
	                }
	            }));
	        }, function (error) {
                console.log('Failure callback: ' + error);
            });
        }
        
		console.log("---over");
</script>
<!--button id="sendButton" onclick="sendData()">Send</button>
<textarea id="dataChannelSend" >abc</textarea>
<div id="result"></div--> 

</body>
</html>

在建立datachannel的时候使用的websocket 的node的代码：

//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 + '/webrtc.html');
});

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({server: server});
function writeObj(obj){ 
    var description = ""; 
    for(var i in obj){   
        var property=obj[i];   
        description+=i+" = "+property+"\n";  
    }   
    console.log(description); 
} 
// 存储socket的数组，这里只能有2个socket，每次测试需要重启，否则会出错
var wsc = [],
index = 1;
// 有socket连入
wss.on('connection', function(ws) {
    console.log('connection:');
    //writeObj(ws);
    // 将socket存入数组
    wsc.push(ws);
    // 记下对方socket在数组中的下标，因为这个测试程序只允许2个socket
    // 所以第一个连入的socket存入0，第二个连入的就是存入1
    // otherIndex就反着来，第一个socket的otherIndex下标为1，第二个socket的otherIndex下标为0
    var otherIndex = index--,
    desc = null;

    if (otherIndex == 1) {
        desc = 'first socket';
    } else {
        desc = 'second socket';
    }
    // 转发收到的消息
    ws.on('message', function(message) {
        var json = JSON.parse(message);
        //console.log('received (' + desc + '): ', json);
        console.log('otherIndex ---('+desc+')(' + otherIndex + '): '+json.event);
        wsc[otherIndex].send(message, function (error) {
            if (error) {
                console.log('Send message error (' + desc + '): ', error);
            }
        });
    });
});

测试，只有chrome可用
1.先在服务器上启动
node server.js
代码不完善，只能两台机器测试

2.一台电脑的chrome
http://192.168.137.27:8081/jslinux/webrtc2.html
另一台
http://192.168.137.27:8081/jslinux/webrtc2.html#true
看console的datachannel建立后
3.start启动vm

4.在一台vm中
tail -f /dev/clipboard
另一台中
echo "hahahahaha" > /dev/clipboard

看第一台机器中的clipboard是否接受到值

jslinux.zip 随便解压到tomcat或者nginx中即可使用，server.js是建立datachannle的时候时候用的websocke

查看图片附件

分享到：

webrtc学习笔记八(datachannnel同步textar ... | webrtc学习笔记六(datachannel+websocket)

2015-10-09 15:34
浏览 809
评论(0)
分类:开源软件
查看更多

发表评论

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

相关推荐

前端三剑客（html+css+js）加vue部分基础运用2: 前端三剑客（html+css+js）加vue部分基础运用2

aiohttp-3.9.4-cp311-cp311-musllinux_1_1_aarch64.whl: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

029-微信小程序-大好商城.zip: 029-微信小程序-大好商城.zip

高分项目，基于Unity3D开发实现的情绪模拟游戏，内含完整源码+资源+unitypackage: 高分项目，基于Unity3D开发实现的情绪模拟游戏，内含完整源码+资源+unitypackage 模拟市民是情绪化的生物，而他们的情绪被心情指数牵动着。游戏中的互动能够带给模拟市民不同的心情指数，例如刷牙可能感到薄荷般的清新，置卫生于不顾则会觉得肮脏。各种心情指数都有相关的情绪强度，模拟市民当前的情绪，取决于他们拥有的心情指数。

cryptography-1.9-cp36-cp36m-win_amd64.whl: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

JavaScript 使用技巧.md: JavaScript 是一种广泛使用的编程语言，主要用于网页开发，但也可以用于服务器端（如 Node.js）和各种其他环境。以下是一些 JavaScript 的使用技巧： 1. **使用模板字符串**：使用反引号（```）可以创建模板字符串，这使得在字符串中嵌入变量或表达式变得更加容易。 ``` const name = "Kimi"; console.log(`Hello, ${name}!`); ``` 2. **箭头函数**：使用箭头函数可以简化函数的编写，并且它们没有自己的 `this` 值。 ``` const add = (a, b) => a + b; ``` 3. **解构赋值**：使用解构赋值可以快速从数组或对象中提取值并赋给变量。 ``` const [a, b] = [1, 2]; const { x, y } = { x: 1, y: 2 }; ``` 4. **使用 `const` 和 `let`**：尽量使用 `const` 来声明只读变量，使用 `let` 来声明可变变

aiohttp-3.7.1-cp36-cp36m-manylinux2014_x86_64.whl: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

025-微信小程序-兵马俑小程序(含语音画册与实时导览).zip: 025-微信小程序-兵马俑小程序(含语音画册与实时导览).zip

基于java+深度学习开发的农作物病虫害识别+APP软件+源码+项目解析+数据+模型训练+数据库（毕业设计&课程设计&项目开发）: 基于java+深度学习开发的农作物病虫害识别+APP软件+源码+项目解析+数据+模型训练+数据库，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于java+深度学习开发的农作物病虫害识别+APP软件+源码+项目解析+数据+模型训练+数据库，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 项目简介：将Deep Learning图像识别技术和地图相册的实时全景结合融入app，让我们的app可以独自识别出相应病害。用户一旦遇到作物病害问题，可以直接拿出手机打开我们的「智农有道」并对植株叶片或者果实进行拍照，通过训练好的模型，app会自动匹配出相似度最高的疾病，对应详情和解决方法也会相应展示给用户，让用户更快速的诊断病害并找到解决防治方案。

aiohttp-3.9.0b1-cp311-cp311-musllinux_1_1_aarch64.whl: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

基于微信小程序的校园兼职系统（源码）: 基于微信小程序的校园兼职系统（源码）

160套-2G-Web网站项目-HTML5源码合集-涵盖多行业网站(商业&科技&培训&商城&课设&毕设&网页简历等模板).7z: HTML网站模板凭借其高度的灵活性和易用性，成为前端开发者的得力助手。这些模板通常预先设计好了页面的布局和样式，开发者可以直接在此基础上进行内容的填充和功能的开发，大大节省了从0到1的时间成本。同时，优质的HTML模板会经过多次的兼容性测试，确保在不同浏览器和设备上都能呈现出良好的视觉效果，提升了用户体验。你是否正在为网站项目寻找灵感与起点？现在，我们为你精心准备了160套、总容量高达2G的Web网站项目HTML5源码合集！无论你是需要搭建商业、科技、培训、商城类网站，还是用于课程设计、毕业设计、网页简历等，这里都能找到心仪的模板。每一套模板都经过精心设计和优化，让你轻松打造专业、美观的网站。快来查看这份宝藏资源，让你的项目事半功倍吧！

《低成本开放式架构跌倒检测系统作为无线传感器网络实现》matlab代码.rar: 1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

cryptography-2.3.1-cp34-cp34m-win_amd64.whl: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

毕设项目：基于CTP和Qt的可视化期货监控系统.zip: 该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。该资源内项目源码是个人的课程设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。

RV1126 LVGL移植: RV1126 LVGL移植

aiohttp-3.8.0-cp39-cp39-musllinux_1_1_ppc64le.whl: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

支持向量机磨损量预测附matlab代码.rar: 1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

基于SpringBoot和Vue员工信息管理系统（PC端+server端源码+MySQL脚本+环境部署步骤讲解+运行步骤讲解）: 服务宗旨：有任何问题私信我适合人群：工作中项目需要、模板框架实战学习、大学毕业设计参考、找工作项目实战积累等等

cryptography-1.3.4-cp35-cp35m-win_amd64.whl: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论