WebRTC 在线聊天室

前言

---

之前写过关于websocket的文章《基于WebSocket的在线聊天室（一）（二）》,这次换成WebRTC来实现语音视频功能。

客户端

---

网上可以找到很多关于WebRTC的demo，不过很多即使翻墙了也跑不起来。再加上直接使用WebRTC配置起来比较复杂，因此在本文中使用的是WebRTC的一个封装库SimpleWebRTC，网址是github.com/andyet/Simp…，这个是nodejs下的项目，经测试可以不用翻墙直接在局域网内使用。

首先，在页面中引入上述demo中的latest-v2.js

<script type="text/javascript" src="js/latest-v2.js"></script>

接着在js中配置webrtc并建立连接

webrtc = new SimpleWebRTC({
    // 显示本地摄像头画面的video元素id
    localVideoEl: 'myVideo',
    // 显示远程摄像头画面的video元素id，此处暂不需要
    remoteVideosEl: '',
    // 自动请求访问媒体设备，即弹框询问是否允许访问相机和麦克风设备
    autoRequestMedia: true,
    debug: false,
    detectSpeakingEvents: true,
    // 媒体请求参数
    media: {
        video: true,// 摄像头
        audio: true// 麦克风
    },
    autoAdjustMic: false
});
// 有新的远程视频流传入时添加video控件来显示画面
webrtc.on('videoAdded', function (video, peer) {
	console.log('video added', peer);
	$(video).fadeIn('slow').appendTo(Console.Win + " #videocontent");
	$(video).attr("id","dest-" + peer.id);
});
// 远程视频流断开时移除该视频画面
webrtc.on('videoRemoved', function (video, peer) {
    console.log('video removed ', peer);
    var dest = $('video[id="dest-' + peer.id + '"]');
	dest && dest.remove()
});

加入房间

webrtc.joinRoom('video');// 'video'为房间名，可随意设置，但在同一个房间内才能通讯

离开房间

webrtc.leaveRoom();// 离开房间后远程客户端就接收不到音/视频流了

注意：webrtc貌似对chrominum版本有要求，建议升级到最新的chrome浏览器。测试过edge浏览器支持,而IE11仍然不支持。

服务端

---

之前的服务端用的是tomcat7,这次就换一换，来个nodejs的写法。网上nodejs中websocket的例子基本都是用的Socket.IO，它号称提供以下几种实时连接方案,在运行时会自动选择最有能力的运输模式，而不影响API的使用。 * WebSocket * Adobe Flash Socket * AJAX 长轮询 * AJAX 多重流 * iframe * JSONP 轮询

但个人觉得Socket.IO的用法比较复杂，或者说和之前tomcat下开发的思路有些差异，触发的事件名称也怪怪的，一时无法接受（貌似客户端也要改成Socket.IO的写法），于是就果断放弃了，而选择采用最原始的用法，写法和客户端比较相近，最重要的是客户端不用做修改。

nodejs环境的配置在这里就不多介绍了，我也是n久之前好奇下过来玩玩的，常年不用，菜鸟一个。

首先，安装ws模块

npm install ws // 最好加上-g参数安装在全局路径下，这样就不用到处安装了

接着就是一大波代码袭来

(function(){
	// http服务设置
	var express = require('express'),
		app = express(),
		http = require('http').createServer(app);

	app.use(express.static(__dirname));

	http.listen(8080, function(){
		console.log('httpServer: listening on "http://localhost:8080"');
	});

	// websocket服务设置
	var WebSocketServer = require('ws').Server,
		wss = new WebSocketServer({
			port: 8082,// 端口设置，最好和http服务监听的端口不同
			// host: "localhost",// 不设置时可使用外网，内网，回环地址发起websocket请求，设置之后只能使用指定ip了
			path: "/websocket/chat"// 请求地址，不设置默认为根路径
		}, function() {
			console.log('websocketServer: listening on "ws://localhost:8082/chat"');
		}),
		connectionList = new ArrayList(),
		roomInfo = {};

	//连接建立
	wss.on('connection', function(ws) {
		var wsid = ws._ultron.id,
			name = "游客" + new Date().getTime().toString();

		console.log("%s 加入了聊天室.",name);

		roomInfo = connectionList.length > 0 ? roomInfo : {
			creater: name,
			createTime: new Date().toLocaleString()
		};

		connectionList.add({
			wsid: wsid,
			name: name,
			connect: ws
		});

		var	dests = getDests(),
			setNameMsg = {
				host: name,
				type: 6, //setName
				roomInfo: roomInfo,
				dests: dests
			},
			joinMsg = {
				host: name,
				type: 1, //setName
				roomInfo: roomInfo,
				dests: dests
			},
			msg = JSON.stringify(setNameMsg);

		//设置名称
		ws.send(msg);

		msg = JSON.stringify(joinMsg);

		//通知所有人有新连接
	    connectionList.foreach(function(obj) {
	    	obj.connect.send(msg);
	    });

		//收到消息
	    ws.on('message', function(message) {
	        console.log('收到%s的消息：%s', name, message);
	        
	        //反序列化
	        var msg = JSON.parse(message);

	        msg.host = name;
	        
	        //序列化
	        message = JSON.stringify(msg);
	        
	        connectionList.foreach(function(obj) {
	        	obj.connect.send(message);
	        });
	    });

	    //连接断开
	    ws.on('close', function(message) {
	        console.log("%s 离开了聊天室.", name  );
	        
	        //移除当前连接
			var index = connectionList.find(function(obj) {
	        	return obj.wsid == wsid;
	        });

	        index > -1 && connectionList.removeAt(index);

			var closeMsg = {
				host: name,
				type: 2, //close
				dests: getDests()
			};

	        message = JSON.stringify(closeMsg);

	        connectionList.foreach(function(obj) {
	        	obj.connect.send(message);
	        });
	    });
	});

	function getDests() {
		var dests = [];

	    connectionList.foreach(function(obj) {
	    	dests[dests.length] = obj.name;
	    });

	    return dests;
	}

	function ArrayList(array) {
		this.array = typeof array !== 'undefined' && array instanceof Array ? array : new Array();
		this.length = this.array.length;
		var that = this,
			setLength = function() {
			that.length = that.array.length;
		};

		this.get = function(index){
			return this.array[index];
		}
		this.add = function(obj) {
			this.array.push(obj);
			setLength();
		};

		this.indexOf = function(obj) {
			return this.array.indexOf(obj);
		}

		this.find = function(callback) {
			for(var i = 0; i < this.length; i++){
				if(callback(this.get(i))) {
					return i;
				}
		    }
		    return -1;
		}

		this.removeAt = function(index){ 
			this.array.splice(index, 1);
			setLength();
		};

		this.remove = function(obj){ 
			var index = this.indexOf(obj); 
			if (index >= 0){ 
				this.removeAt(index); 
			}
		};

		this.clear = function(){ 
			this.array.length = 0;
			setLength();
		};

		this.insertAt = function(index, obj){ 
			this.array.splice(index, 0, obj);
			setLength();
		};

		this.foreach = function(callback) {
			for(var i = 0; i < this.length; i++){
				callback(this.get(i));
		    }
		};
	}
})();

将上述代码写入server.js，再运行命令行切换到当前目录下通过node server命令即可启动服务（在我的例子中可以直接双击项目根目录下的批处理文件打开）

启动的有两个服务器，其中http是http服务器，用于当前目录下的页面访问；另一个wss是websocket服务器，用于websocket服务，当有新连接建立就会触发websocket服务器的**"connection"**事件，而收到消息和连接断开则是触发websocket连接这个"对象"的事件，与tomcat下触发的都是ServerEndpoint的事件稍微有点差异。

之前的文章末尾有提到过 nginx 的反向代理配置，同样适用于 nodejs ,本文就不多赘述了。

总结

---

1. 由于用了现成的封装库 SimpleWebRTC，代码量很少，用起来很方便，性能方面也比我之前通过websocket实现的要好很多。不过，还没测试过外网访问的效果，外网还需要 STUN，ICE等服务器实现 NAT 穿透，有兴趣的同学可自行翻墙试试。
2. 服务端改由 nodejs 实现，这样代码全部都是由 html + js + css 组成的了，另外服务启动很快，内存占用也很少。

---

参考文章：

• blog.chinaunix.net/uid-2456787…
• my.oschina.net/yushulx/blo…

---

项目代码已在github上更新

---

转载请注明出处：www.jianshu.com/p/63d4d1528…