说到比心源码，不如讲讲比心源码实现聊天室功能该怎么做？
比心源码是“比心陪玩源码”的简称，在比心源码中，聊天室功能是很重要的模块，它能够促进用户流通，加速社交，本文就来讲讲如何实现比心陪玩源码中的聊天室功能模块，本文中需要使用到的软件及实现效果：
1、基于：SimpleWebRTC
2、客户端：网页版
3、效果：多人聊天室，可实现视频、文本
一、比心源码“聊天室”的 实现方法
将以下代码保存为html文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | ```bash<html><head> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://simplewebrtc.com/latest.js"></script> <script> var webrtc = new SimpleWebRTC({ // the id/element dom element that will hold "our" video localVideoEl: 'localVideo', // the id/element dom element that will hold remote videos remoteVideosEl: 'remoteVideos', // immediately ask for camera access autoRequestMedia: true, //url:'http://111.172.238.250:8888' nick: 'wuhan' }); // we have to wait until it's ready webrtc.on('readyToCall', function () { // you can name it anything webrtc.joinRoom('room1'); // Send a chat message $('#send').click(function () { var msg = $('#text').val(); webrtc.sendToAll('chat', { message: msg, nick: webrtc.config.nick }); $('#messages').append('<br>You:<br>' + msg + '\n'); $('#text').val(''); }); }); //For Text Chat ------------------------------------------------------------------ // Await messages from others webrtc.connection.on('message', function (data) { if (data.type === 'chat') { console.log('chat received', data); $('#messages').append('<br>' + data.payload.nick + ':<br>' + data.payload.message+ '\n'); } }); </script> <style> #remoteVideos video { height: 150px; } #localVideo { height: 150px; } </style></head><body> <textarea id="messages" rows="5" cols="20"></textarea><br /> <input id="text" type="text" /> <input id="send" type="button" value="send" /><br /> <video id="localVideo"></video> <div id="remoteVideos"></div></body></html>``` |
如何测试——修改nick：‘wuhan’为自己的名字，用firefox或chrome打开
二、可实现什么样的效果
比心源码“聊天室”的重点在于收发消息及远程视频视频，使用本文中的方式进行实现可能在效果上仍需优化
三、比心源码的开发原理
1、 SimpleWebRTC是什么？
SimpleWebRTC是WebRTC的一个封装类库，WebRTC的目的是为了简化基于浏览器的实时数据通信的开发工作量，但实际应用编程还是有点复杂，尤其调用RTCPeerConnection必须对怎样建立连接、交换信令的流程和细节有较深入的理解。
2、 更简单的使用方式
因此有高人开发了WebRTC封装库，将WebRTC的调用细节封装起来，包装成更简单的API，使开发应用程序更简单。封装库的还有一个目的是为了屏蔽不同浏览器之间的差异，比如上面说的API名称的差异。当然，这些库都是开源的，能够依据自己的须要又一次改动。
3、如何获取
眼下网上找到的有两种WebRTC封装库，一个是webrtc.io，有非常多demo使用它；还有一个是SimpleWebRTC，比webrtc.io用起来更简单。
四、比心源码与视频聊天
三步创建视频聊天：
1、 html页面
1 2 3 4 5 6 7 8 9 10 11 | ```bash<html> <head> <script src="//simplewebrtc.com/latest.js"></script> </head> <body> <video height="300" id="localVideo"></video> <div id="remotesVideos"></div> </body></html>``` |
2、 创建web RTC对象
1 2 3 4 5 6 7 8 9 10 11 | ```bashvar webrtc = new SimpleWebRTC({ // the id/element dom element that will hold "our" video localVideoEl: 'localVideo', // the id/element dom element that will hold remote videos remoteVideosEl: 'remotesVideos', // immediately ask for camera access autoRequestMedia: true}); ``` |
3、 进入房间
1 2 3 4 5 6 7 8 | ```bash// we have to wait until it's readywebrtc.on('readyToCall', function () { // you can name it anything webrtc.joinRoom('wuhan');}); ``` |
4、 html内容
1 2 3 4 5 | ```bash<textarea id="messages" rows="5" cols="20"></textarea><br /><input id="text" type="text" /><input id="send" type="button" value="send" /><br />``` |
5、 发消息
1 2 3 4 5 6 7 8 9 | ```bash// Send a chat message$('#send').click(function () { var msg = $('#text').val(); webrtc.sendToAll('chat', { message: msg, nick: webrtc.config.nick }); $('#messages').append('<br>You:<br>' + msg + '\n'); $('#text').val('');});``` |
6、 收消息
1 2 3 4 5 6 7 8 9 | ```bash// Await messages from others webrtc.connection.on('message', function (data) { if (data.type === 'chat') { console.log('chat received', data); $('#messages').append('<br>' + data.payload.nick + ':<br>' + data.payload.message+ '\n'); } });``` |
以上工作完成后，比心源码就基本实现了网页端的视频和聊天
