2. 程式人生 > >WebRTC實時通訊系列教程7 使用Socket.IO搭建信令伺服器交換資訊

WebRTC實時通訊系列教程7 使用Socket.IO搭建信令伺服器交換資訊

阿新 • • 發佈：2019-01-19

 PS：如果本文對您有幫助，請點個贊讓我知道哦~微笑

一、譯文

1、你將學到

  • 使用 npm 安裝 package.json檔案裡的專案依賴
  • 執行Node伺服器並使用node-static模組支援靜態資原始檔訪問.
  • 使用 socket.io 在Node上提供訊息傳輸服務.
  • 建立房間並傳輸訊息.

完整示例程式碼在 step-04 目錄下.

2、概念

為了建立並維持WebRTC通話, WebRTC 客戶端 (peers)之間需要交換元資料:

  • Candidate (network) 資訊.
  • Offer 和 answer 訊息提供媒體的資訊,如解析度和編解碼器。

也就是說, 在點對點之間傳輸音視訊和資料之前需要交換元資料. 這一過程叫做信令交換(signaling

).

在前面的小節中, RTCPeerConnection 物件之間傳送和接收資料是在同一頁面, 所以信令交換隻需要物件之間賦值就實現了元資料傳遞.

但在實際應用當中, RTCPeerConnections的傳送端和接收端是不同的裝置, 所以我們需要一種方法在其之間交換元資料.

在這裡,我們使用了信令伺服器(signaling server): 一個能使WebRTC客戶端(peers)之間交換資訊的伺服器.這些訊息是純文字資訊: 序列化的 JavaScript物件.

3、關於應用

在這節中我們將建立一個簡單的 Node.js 信令伺服器, 使用 Socket.IO 模組和 JavaScript 庫進行通訊

.學會 Node.js 和 Socket.IO 的使用是很有用的, 但在這裡不是主要的; 這個訊息元件很簡單.

選擇合適的信令伺服器

使用Socket.io能夠非常簡單地建立訊息通訊服務, 並且Socket.io 非常適合 WebRTC 信令交換因為它內建了房間('rooms')概念.

在程式碼中, Node應用服務端程式碼在index.js檔案中實現, Web客戶端程式碼在 index.html 檔案中實現.

Node應用需要實現兩個功能.

首先, 它能夠進行訊息傳遞:

socket.on('message',function(message){
  log('Got message: '
 
, message);
  socket.broadcast.emit('message', message);});

其次, 它能管理WebRTC視訊聊天房間:

if(numClients ===1){
  socket.join(room);
  socket.emit('created', room, socket.id);}elseif(numClients ===2){
  socket.join(room);
  socket.emit('joined', room, socket.id);
  io.sockets.in(room).emit('ready');}else{// max two clients
  socket.emit('full', room);}

我們這個簡單的WebRTC應用中最多允許兩個客戶端在同一房間中.

4、HTML和JavaScript程式碼

index.html檔案程式碼:

<!DOCTYPE html><html><head><title>Realtime communication with WebRTC</title><linkrel="stylesheet"href="css/main.css"/></head><body><h1>Realtime communication with WebRTC</h1><scriptsrc="/socket.io/socket.io.js"></script><scriptsrc="js/main.js"></script></body></html>

你在頁面上看不到任何資訊: 瀏覽器控制檯會有日誌輸出.

js/main.js 檔案程式碼:

'use strict';var isInitiator;

window.room = prompt("Enter room name:");var socket = io.connect();if(room !==""){
  console.log('Message from client: Asking to join room '+ room);
  socket.emit('create or join', room);}

socket.on('created',function(room, clientId){
  isInitiator =true;});

socket.on('full',function(room){
  console.log('Message from client: Room '+ room +' is full :^(');});

socket.on('ipaddr',function(ipaddr){
  console.log('Message from client: Server IP address is '+ ipaddr);});

socket.on('joined',function(room, clientId){
  isInitiator =false;});

socket.on('log',function(array){
  console.log.apply(console, array);});


5、在Node伺服器執行Socket.IO

在 work 根目錄下建立檔案 package.json :

{
  "name": "webrtc-codelab",
  "version": "0.0.1",
  "description": "WebRTC codelab",
  "dependencies": {
    "node-static": "0.7.7",
    "socket.io": "1.2.0"
  }
}

這是一個應用程式清單,告訴Node包管理器(npm)要安裝的專案依賴。

在 work 目錄下使用以下命令列即可安裝專案依賴:

npm install

安裝結束後你將看到一下日誌:


正如你所看到的, npm 已經把 package.json 檔案裡定義的專案依賴安裝好了.

可能會有警告資訊, 但如果有紅色的錯誤資訊,可以尋求幫助!

在 work 根目錄下建立檔案 index.js:(注意不是在js目錄中)

'use strict';var os =require('os');var nodeStatic =require('node-static');var http =require('http');var socketIO =require('socket.io');var fileServer =new(nodeStatic.Server)();var app = http.createServer(function(req, res){
  fileServer.serve(req, res);}).listen(8080);var io = socketIO.listen(app);
io.sockets.on('connection',function(socket){// convenience function to log server messages on the clientfunction log(){var array =['Message from server:'];
    array.push.apply(array, arguments);
    socket.emit('log', array);}

  socket.on('message',function(message){
    log('Client said: ', message);// for a real app, would be room-only (not broadcast)
    socket.broadcast.emit('message', message);});

  socket.on('create or join',function(room){
    log('Received request to create or join room '+ room);var numClients = io.sockets.sockets.length;
    log('Room '+ room +' now has '+ numClients +' client(s)');if(numClients ===1){
      socket.join(room);
      log('Client ID '+ socket.id +' created room '+ room);
      socket.emit('created', room, socket.id);}elseif(numClients ===2){
      log('Client ID '+ socket.id +' joined room '+ room);
      io.sockets.in(room).emit('join', room);
      socket.join(room);
      socket.emit('joined', room, socket.id);
      io.sockets.in(room).emit('ready');}else{// max two clients
      socket.emit('full', room);}});

  socket.on('ipaddr',function(){var ifaces = os.networkInterfaces();for(var dev in ifaces){
      ifaces[dev].forEach(function(details){if(details.family ==='IPv4'&& details.address !=='127.0.0.1'){
          socket.emit('ipaddr', details.address);}});}});});

在 work 目錄下使用以下命令列:

node index.js

在瀏覽器開啟 localhost:8080.

每次你開啟這個URL地址, 將被提示輸入一個房間名稱. 要加入同一個房間,每次選擇同一個房間名稱,如“foo”.

開啟新標籤, 再次訪問 localhost:8080 . 選擇相同的房間名.

在第三個標籤中開啟 localhost:8080 . 再次選擇相同的房間名.

檢查每個標籤的控制檯: 你將會看到上述 JavaScript 程式碼列印的日誌.

6、拓展

  1. 我們可以選擇哪些訊息傳遞機制? 使用純WebSocket會遇到哪些問題?
  2. 如果要擴充套件這個應用會遇到哪些問題? 你能開發一種方法來測試數以千計甚至數以百萬計的同時房間請求嗎?
  3. 這個應用使用JavaScript提示輸入房間名. 找到一種方法從URL地址來獲取房間名. 例如從 localhost:8080/foo 獲取房間名foo.

7、你學習了

  • 使用 npm 安裝 package.json檔案裡的專案依賴
  • 執行Node伺服器並使用node-static模組支援靜態資原始檔訪問.
  • 使用 socket.io 在Node上提供訊息傳輸服務.
  • 建立房間並傳輸訊息.

完整示例程式碼在 step-04 目錄下.

8、更多資料

9、下一節

使用信令傳輸讓兩個使用者建立P2P連線.

二、原文

摘自https://codelabs.developers.google.com/codelabs/webrtc-web/#5

7. Set up a signaling service to exchange messages

What you'll learn

In this step, you'll find out how to:

  • Use npm to install project dependencies as specified in package.json
  • Run a Node server and use node-static to serve static files.
  • Set up a messaging service on Node using socket.io.
  • Use that to create 'rooms' and exchange messages.

A complete version of this step is in the step-04 folder.

Concepts

In order to set up and maintain a WebRTC call, WebRTC clients (peers) need to exchange metadata:

  • Candidate (network) information.
  • Offer and answer messages providing information about media, such as resolution and codecs.

In other words, an exchange of metadata is required before peer-to-peer streaming of audio, video, or data can take place. This process is called signaling.

In the previous steps, the sender and receiver RTCPeerConnection objects are on the same page, so 'signaling' is simply a matter of passing metadata between objects.

In a real world application, the sender and receiver RTCPeerConnections run in web pages on different devices, and we need a way for them to communicate metadata.

For this, we use a signaling server: a server that can pass messages between WebRTC clients (peers). The actual messages are plain text: stringified JavaScript objects.

About the app

In this step we'll build a simple Node.js signaling server, using the Socket.IO Node module and JavaScript library for messaging. Experience with Node.js and Socket.IO will be useful, but not crucial; the messaging components are very simple.

Choosing the right signaling server

This codelab uses Socket.IO for a signaling server.

The design of Socket.io makes it straightforward to build a service to exchange messages, and Socket.io is suited to WebRTC signaling because of its built-in concept of 'rooms'.

In this example, the server (the Node application) is implemented in index.js, and the client that runs on it (the web app) is implemented in index.html.

The Node application in this step has two tasks.

First, it acts as a message relay:

socket.on('message',function(message){
  log('Got message: ', message);
  socket.broadcast.emit('message', message);});

Second, it manages WebRTC video chat 'rooms':

if(numClients ===1){
  socket.join(room);
  socket.emit('created', room, socket.id);}elseif(numClients ===2){
  socket.join(room);
  socket.emit('joined', room, socket.id);
  io.sockets.in(room).emit('ready');}else{// max two clients
  socket.emit('full', room);}

Our simple WebRTC application will permit a maximum of two peers to share a room.

HTML & JavaScript

Update index.html so it looks like this:

<!DOCTYPE html><html><head><title>Realtime communication with WebRTC</title><linkrel="stylesheet"href="css/main.css"/></head><body><h1>Realtime communication with WebRTC
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
WebRTC實時通訊系列教程7 使用Socket.IO搭建信令伺服器交換資訊

     
 
                


 PS：如果本文對您有幫助，請點個贊讓我知道哦~


















一、譯文
1、你將學到

使用 npm 安裝 package.json檔案裡的專案依賴執行Node伺服器並使用node-static模組支援靜態資原始檔訪問.使用 socket.io  



  
 

    


    
    
Python+Django+SAE系列教程7-----在Sae上配置Django

     
 說明   water   系列教程   font   cati   代碼   目錄   教程   本地   


本章的開始首先我們來註冊一個sae賬號，首先登錄http://sae.sina.com.cn/。進入登錄頁面，這裏須要一個新浪微博賬號進行註冊。假設沒有趕快去註冊一個吧。


登錄平臺後。會提示一 



  
 

    


    
    
Go 系列教程-7 面向物件

     
  
 
 Go 系列教程 —— 26. 結構體取代類 
   
 Go 支援面向物件嗎？ 
 Go 並不是完全面向物件的程式語言。Go 官網的 FAQ 回答了 Go 是否是面嚮物件語言，摘錄如下。 
  
  可以說是，也可以說不是。雖然 Go 有型別和方法，支援面向物件的程式設 



  
 

    


    
    
與WebRTC實時通訊

     
  
  
  
 與WebRTC實時通訊 
 一、介紹 
 WebRTC是一個開源專案，可以在Web和本機應用程式中實現音訊，視訊和資料的實時通訊。WebRTC有幾個JavaScript API： getUserMedia()：捕獲音訊和視訊。 MediaRecorder：錄製音訊和視訊。 RTCPeerCo 



  
 

    


    
    
樹莓派開發系列教程7——樹莓派做web伺服器(nginx、Apache)

     
 
                
一想到Linux Web伺服器，我們首先想到的是：
Apache + MySql + Php．

Apache:是世界使用排名第一的Web伺服器軟體。
可以執行在幾乎所有廣泛使用的計算機平臺上，由於其跨平臺和安全性被廣泛使用，是最流行的Web伺服器端軟體.
MySQL:是一 



  
 

    


    
    
【Python3.6+Django2.0+Xadmin2.0系列教程一】環境搭建及項目創建

     
 添加   tran   div   先來   ans   好的項目   tty   文件   mac   由於工作需要，接觸了大半年時間的Django+xadmin框架，一直沒空對這塊對進行相關的梳理。最近在同事的慫恿下，就在這分享下筆者的學習及工作經驗吧。
好了，話不多說，下面開始進入正題：
 
環境 



  
 

    


    
    
Node.js+Socket.io搭建簡單的websocket伺服器

     
 
                    因為專案原因需要使用websocket這種全雙工的通訊方式，但是在後端伺服器還沒搭建好的情況下，就只能自己搭建一個測試伺服器，下面我將一步步的列舉單間過程；

開發工具：webstorm

1.服務端

第一步：新建一個專案資料夾，開啟webstorm，進入該專案資料 



  
 

    


    
    
利用socket.io搭建一個簡易的聊天室

     
 
                前言

本篇介紹使用node.js模組元件socket.io實現一個非常非常簡易的聊天案例。
本系列文章不對 socket.io 歷史背景做過多闡述，只會通過一個個的案例帶領大家進入socket.io的殿堂，增進小夥伴在socket.io實際開發中的基本使用。
socket. 



  
 

    


    
    
使用express4與socket.io搭建伺服器

     
 
							
							
							首先安裝express4,參考http://www.expressjs.com.cn/starter/generator.html
npm install express-generator -g

然後建立express專案
express -e myapp
 



  
 

    


    
    
【React Native系列教程】Windows平臺搭建React Native開發環境

     
  
 
  
  
  
  尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72454037) 
  
  
  告訴大家一個好訊息，為大家精心準備的React Native視訊教程釋出了，大家 



  
 

    


    
    
socket.io搭建分散式Web推送伺服器

     
 
                

socket.io是目前較為流行的web實時推送框架，其基於nodejs語言開發，底層用engine.io實現。 藉助nodejs語言非同步的特性，其獲得了不錯的效能。但單個例項的socket.io依然承載能力有限，最多隻能容納3000個long-polling方式的客戶 



  
 

    


    
    
webrtc客戶端與TURN和信令伺服器通訊流程圖

     
 
                

WebRTC是HTML5支援的重要特性之一，有了它，不再需要藉助音視訊相關的客戶端，直接通過瀏覽器的Web頁面就可以實現音視訊對聊功能。而且WebRTC專案是開源的，我們可以藉助WebRTC原始碼快速構建自己的音視訊對聊功能。無論是使用前端JS的WebRTC API介面， 



  
 

    


    
    
使用Node.js+Socket.IO搭建WebSocket 實現多人群聊

     
 
                
今天我們做的就是無重新整理實時多人聊天，最終效果我們可以看下：

Node.js

Node.js採用C++語言編寫而成，它不是Javascript應用，而是一個Javascript的執行環境，據Node.js創始人Ryan Dahl回憶，他最初希望採用Ruby來寫Node 



  
 

    


    
    
Spring Boot2 系列教程(一)純 Java 搭建 SSM 專案

     
 在 Spring Boot 專案中，正常來說是不存在 XML 配置，這是因為 Spring Boot 不推薦使用 XML ，注意，並非不支援，Spring Boot 推薦開發者使用 Java 配置來搭建框架，Spring Boot 中，大量的自動化配置都是通過 Java 配置來實現的，這一套實現方案，我們也可 



  
 

    


    
    
原  WebRTC搭建流程（三）信令伺服器搭建

     
 
								
								            
							
							
							信令伺服器搭建
（一）信令伺服器安裝

google 已經go語言實現了一個信令伺服器，拷貝出來即可


拷貝出來

cd ~
cp apprtc/src/collider/ . -r   //將信令伺 



  
 

    


    
    
Webrtc之apprtc與信令伺服器構建

     
 
                
戴維營教育原創文章，轉載請註明出處。



0.前言動機


早在去年初(2015年2月)的時候,戴維營教育由於課程需要講WebRTC實時音視訊聊天技術,就寫過一個教程一步一步搭建一個WebRTC的後臺伺服器AppRTC的教程,但是由於Goggle官方程式碼有改變,導致大部 



  
 

    


    
    
搭建 webrtc 信令伺服器

     
 
                

當下載編譯了webrtc的demo程式碼時需要執行測試時，發現demo程式碼裡的伺服器地址指向了https://appr.tc， webrtc是google推出，在中國就意味著需要翻牆，為何不在自己的linux 虛擬機器上自己搭建一個https://appr.tc 服務來 



  
 

    


    
    
Nodejs實時通訊 線上聊天室（Socket.io)_收藏

     
 
                

前言
網路聊天室在web1.0的時代就出現了，但當時技術支援比較有限，大都是通過瀏覽器外掛BHO，JavaApplet，Flash實現的。如今HTML5技術風起雲湧，通過websocket實現的網路聊天室，被定義為websocket的第一個實驗，就像Hello World 



  
 

    


    
    
socket系列（三）——Spring-socket實時通訊、推送

     
 
                
Spring-socket實現實時通訊
實現
Spring4.x釋出spring-socket模組包，用於支援websocket，同時相容支援socketJS。
需要把spring所有的包更新到4.x以上版本，並下載spring-websocket包。
所需jar包

&l 



  
 

    


    
    
Socket.IO：支援WebSocket協議、用於實時通訊和跨平臺的框架

     
 
                

WebSocket是HTML5的一種新通訊協議，它實現了瀏覽器與伺服器之間的雙向通訊。而Socket.IO是一個完全由JavaScript實現、基於Node.js、支援WebSocket的協議用於實時通訊、跨平臺的開源框架，它包括了客戶端的JavaScript和伺服器端的