绑定完请刷新页面
取消
刷新

分享好友

×
取消 复制
比心源码实现聊天室功能该怎么做
2020-08-20 16:10:54

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

比心源码是“比心陪玩源码”的简称,在比心源码中,聊天室功能是很重要的模块,它能够促进用户流通,加速社交,本文就来讲讲如何实现比心陪玩源码中的聊天室功能模块,本文中需要使用到的软件及实现效果:

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
```bash
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、  进入房间


1
2
3
4
5
6
7
8
```bash
// we have to wait until it's ready
webrtc.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');
      }
  });
```


以上工作完成后,比心源码就基本实现了网页端的视频和聊天



分享好友

分享这个小栈给你的朋友们,一起进步吧。

云豹科技
创建时间:2020-08-20 15:14:56
分享云豹科技旗下产品相关功能代码,及其他相关干货知识
展开
订阅须知

• 所有用户可根据关注领域订阅专区或所有专区

• 付费订阅:虚拟交易,一经交易不退款;若特殊情况,可3日内客服咨询

• 专区发布评论属默认订阅所评论专区(除付费小栈外)

栈主、嘉宾

查看更多
  • 云豹科技产品经理
    栈主
戳我,来吐槽~