说到比心源码，不如讲讲比心源码实现聊天室功能该怎么做？

转载

泰安云豹科技 2021-06-04 18:29:32

说到比心源码，不如讲讲比心源码实现聊天室功能该怎么做？
比心源码是“比心陪玩源码”的简称，在比心源码中，聊天室功能是很重要的模块，它能够促进用户流通，加速社交，本文就来讲讲如何实现比心陪玩源码中的聊天室功能模块，本文中需要使用到的软件及实现效果：
1、基于：SimpleWebRTC
2、客户端：网页版
3、效果：多人聊天室，可实现视频、文本

一、比心源码“聊天室”的实现方法
将以下代码保存为html文件

<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页面

<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对象

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: 'remotesVideos',
  // immediately ask for camera access
  autoRequestMedia: true
});

3、进入房间

	// we have to wait until it's ready
webrtc.on('readyToCall', function () {
  // you can name it anything
  webrtc.joinRoom('wuhan');
});

4、 html内容

	<textarea id="messages" rows="5" cols="20"></textarea><br />
<input id="text" type="text" />
<input id="send" type="button" value="send" /><br />

5、发消息

	// 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、收消息

	// 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');
      }
  });