PeerJS實現(xiàn)實時在線消息發(fā)送的示例代碼

更新時間：2025年07月17日 10:15:35 作者：Mr.怪獸

PeerJS庫是一個基于WebRTC的JavaScript庫,簡化了瀏覽器間P2P的數(shù)據(jù)和媒體連接,本文通過在線聊天和圖片傳輸?shù)拇a示例展示了如何使用PeerJS進行點對點通信,感興趣的可以了解一下

1.PeerJS介紹

PeerJS 是一個基于瀏覽器WebRTC功能實現(xiàn)的js功能包，提供豐富的、易用的并且可以配置的P2P連接API，借助PeerJS可以實現(xiàn)一端通過知道另一端的ID進行連接，ID可以自行設置也可以服務器隨機分配，并且建立Data或Media連接，實現(xiàn)data數(shù)據(jù)或者Media傳輸功能。

PeerJS開源項目簡化了WebrRTC的開發(fā)過程，對底層的細節(jié)做了封裝，直接調(diào)用API即可。

2.PeerJS 基礎用法

PeerJS的核心對象是Peer，有以下常用的方法：

創(chuàng)建對等對象

Peer 對象是我們創(chuàng)建和接收連接的地方，每個 Peer 對象在創(chuàng)建時都會被分配一個隨機的唯一 ID。

var peer = new Peer();
peer.on('open', function(id) {
    console.log('My peer ID is: ' + id);
  });

Peer連接

連接到指定的遠程peer并返回數(shù)據(jù)連接。

peer.connect（id， [options]）

Peer調(diào)用

調(diào)用指定的遠程Peer并返回媒體連接。

peer.call（id， stream， [options]）

Peer監(jiān)聽

為Peer事件設置偵聽器。

peer.on（event， callback）;
?
peer.on（'open'， function（id） { ... }）; //打開事件
peer.on（'connection'， function（dataConnection） { ... }）;//連接事件
peer.on（'call'， function（mediaConnection） { ... }）; //呼叫事件
peer.on（'data'， function（data） { ... }）; //傳輸消息事件
peer.on（'close'， function（） { ... }）; //關(guān)閉事件
peer.on（'disconnected'， function（） { ... }）;//斷開連接事件
peer.on（'error'， function（err） { ... }）; //錯誤事件

Peer斷開

關(guān)閉與服務器的連接，保持所有現(xiàn)有數(shù)據(jù)和媒體連接不變。

peer.disconnect（）;

Peer重新連接

嘗試使用另一方Peer的舊 ID 重新連接到服務器。只有斷開連接的對等方才能重新連接。

peer.reconnect（）;

Peer銷毀

關(guān)閉與服務器的連接并終止所有現(xiàn)有連接。peer.destroy.將設置為。true

peer.destroy（）;

相關(guān)PeerJS介紹文檔地址：https://www.npmjs.com/package/peerjs 和 https://peerjs.com。

可以參考API手冊了解更多以及詳細PeerJS內(nèi)容

3.安裝依賴

npm i peerjs

4.在線聊天代碼實現(xiàn)

SendMsg.vue 發(fā)起者代碼示例

<template>
  <h1>【W(wǎng)ebRTC實例】 PeerJS 實現(xiàn)點對點聊天發(fā)起者</h1>
  <div>
    <button @click="requestCallFn">請求連接</button>
  </div>
  <input type="text"
         @keyup="inputTxtFn">
  <button @click="sendFn">發(fā)送信息</button>
  <div>收到消息：{{ receiveVal }}</div>
</template>
?
<script setup>
import { ref } from 'vue'
import { Peer } from "peerjs";
?
var peer = new Peer() // peer對象
let peerId = null
let sendVal = ref('') // 輸入文字框
let receiveVal = ref('') //接收信息
?
// 請求連接
const requestCallFn = () => {
  // 生成自己的id，給接收者連接自己的時候調(diào)用
  peer.on('open', id => {
    peerId = id
    console.log(id);
    console.log('請求連接，保存peerId在本地存儲中', peerId);
    localStorage.setItem("peerId", peerId)
  })
}
?
// 監(jiān)聽被接收者連接事件
peer.on('connection', (connObj) => {
  console.log('被接收者連接：', connObj);
  // 保存接收方的id，給發(fā)送按鈕使用
  localStorage.setItem("receiveId", connObj.peer)
  // 監(jiān)聽接收消息
  connObj.on('data', (data) => {
    // console.log('接收到接收方的消息：', data);
    receiveVal.value = data
  })
})
?
// 輸入信息時監(jiān)聽
const inputTxtFn = (e) => {
  // console.log(e.target.value);
  sendVal.value = e.target.value
}
?
// 發(fā)送按鈕
const sendFn = () => {
  // 獲取接收方的id
  let receiveId = localStorage.getItem('receiveId')
  // 建立與對方的連接
  let connObj = peer.connect(receiveId)
  connObj.on('open', () => {
    // 發(fā)送給對方消息
    connObj.send(sendVal.value)
  })
}
</script>
?
<style>
</style>

ReceiveMsg.vue 接收者代碼示例

<template>
  <h1>【W(wǎng)ebRTC實例】 PeerJS 實現(xiàn)點對點聊天接收者</h1>
  <div>
    <button @click="replayCallFn">接收連接</button>
  </div>
  <input type="text"
         @keyup="replyTxtFn">
  <button @click="replyBtn">回復信息</button>
  <div>收到消息：{{ receiveVal }}</div>
</template>
?
<script setup>
import { ref, reactive } from 'vue'
import { Peer } from "peerjs";
?
?
let peerObj = reactive({ obj: null })
let receiveVal = ref('') //接收信息
?
?
// 接通
const replayCallFn = () => {
  peerObj.obj = new Peer()
  peerObj.obj.on('open', () => {
    // 從本地存儲中取得發(fā)送者的key
    let peerId = localStorage.getItem('peerId')
    console.log('獲取到peerId', peerId);
    // 建立發(fā)送者的連接
    let conn = peerObj.obj.connect(peerId)
    // 把接收者的id發(fā)送回去
    conn.on('open', () => {
      conn.send('你好發(fā)送者，我是接收者，我收到了你的請求。')
    })
  })
  // 監(jiān)聽發(fā)送者的信息
  peerObj.obj.on('connection', function (conn) {
    conn.on('data', (data) => {
      // console.log('收到發(fā)送者的消息', data);
      receiveVal.value = data
    });
  })
}
?
// 輸入文字框
let sendVal = ref('')
const replyTxtFn = (e) => {
  // console.log(e.target.value);
  sendVal.value = e.target.value
}
?
//回話
const replyBtn = () => {
  let peerId = localStorage.getItem('peerId')
  // 建立發(fā)送者的連接
  let conn = peerObj.obj.connect(peerId)
  // 發(fā)送信息
  conn.on('open', () => {
    conn.send(sendVal.value)
  })
}
?
</script>
 
<style>
</style>

結(jié)果顯示

5.圖片傳輸代碼實現(xiàn)

將arraybuffer格式數(shù)據(jù)還原成圖片的過程：

把arraybuffer格式先轉(zhuǎn)為二進制，再轉(zhuǎn)成base64格式的圖片

ArrayBuffer對象代表存儲二進制數(shù)據(jù)的一段內(nèi)存，不能直接讀寫，只能通過視圖（TypedArray視圖和DataView視圖）來讀寫，視圖的作用是以指定格式解讀二進制數(shù)據(jù)。

new Uint8Array() 的返回值類型是 TypedArray，指的是一類指定元素類型的數(shù)組，而不是array的數(shù)組類型。

ArrayBuff 轉(zhuǎn) Base64 ，使用btoa() 方法用于創(chuàng)建一個 base-64 編碼的字符串。該方法使用‘A-Z’,'a-z','0-9','+','/'和'=' 字符來編碼字符串。

String.fromCharCode() 可接收一個指定的Unicode 值，然后返回一個字符串。

SendMsg.vue 發(fā)起者代碼示例

<template>
  <h1>【W(wǎng)ebRTC實例】 PeerJS 實現(xiàn)點對點聊天發(fā)起者</h1>
  <div>
    <button @click="requestCallFn">請求連接</button>
  </div>
  <input type="file"
         @change="upImgFn">
  <div>
    <img :style="{width:'200px',height:'200px'}"
         :src="priviewImg"
         alt="">
  </div>
</template>
?
<script setup>
import { ref } from 'vue'
import { Peer } from "peerjs";
?
var peer = new Peer() // peer對象
let peerId = null
?
// 請求連接
const requestCallFn = () => {
  // 生成自己的id，給接收者連接自己的時候調(diào)用
  peer.on('open', id => {
    peerId = id
    console.log(id);
    console.log('請求連接，保存peerId在本地存儲中', peerId);
    localStorage.setItem("peerId", peerId)
  })
}
?
// 監(jiān)聽被接收者連接事件
peer.on('connection', (connObj) => {
  console.log('被接收者連接：', connObj);
  // 保存接收方的id，給發(fā)送按鈕使用
  localStorage.setItem("receiveId", connObj.peer)
  // 監(jiān)聽接收消息
  connObj.on('data', (data) => {
    console.log('接收到接收方的消息：', data);
    // 將data數(shù)據(jù) 通過Uint8Array()方法 轉(zhuǎn)為TypedArray類型再進行讀寫
    // console.log(new Uint8Array(data));
    //使用 btoa() 方法用于創(chuàng)建一個 base-64 編碼的字符串
    // String.fromCharCode() 可接收一個指定的Unicode 值，然后返回一個字符串。
    priviewImg.value = 'data:image/png;base64,' + btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
    // console.log(priviewImg.value);
  })
})
?
// 上傳圖片
let priviewImg = ref('')
const upImgFn = (e) => {
  console.log(e.target.files);
  let obj = e.target.files[0]
  // 轉(zhuǎn)為二進制blob對象，用于保存大文件
  const blobVal = new Blob(e.target.files, { type: obj.type })
  // 通過URL.createObjectURL(blobVal) 可以獲取一個當前文件的一個內(nèi)存URL
  priviewImg.value = URL.createObjectURL(blobVal)
  // 發(fā)送圖片給接收者
  sendFn(blobVal)
}
?
// 發(fā)送事件
const sendFn = (blobVal) => {
  // 獲取對方ID
  let receiveId = localStorage.getItem('receiveId')
  // 建立連接
  let connObj = peer.connect(receiveId)
  connObj.on('open', () => {
    // 發(fā)送信息給對方
    connObj.send(blobVal)
  })
}
?
</script>
?
<style>
</style>

ReceiveMsg.vue 接收者代碼示例

<template>
  <h1>【W(wǎng)ebRTC實例】 PeerJS 實現(xiàn)點對點聊天接收者</h1>
  <div>
    <button @click="replayCallFn">接收連接</button>
  </div>
  <input type="file"
         @change="upImgFn">
  <div>
    <img :style="{width:'200px',height:'200px'}"
         :src="priviewImg"
         alt="">
  </div>
</template>
?
<script setup>
import { ref, reactive } from 'vue'
import { Peer } from "peerjs";
?
let priviewImg = ref('')
let peerObj = reactive({ obj: null })
?
?
// 接通
const replayCallFn = () => {
  peerObj.obj = new Peer()
  peerObj.obj.on('open', () => {
    // 從本地存儲中取得發(fā)送者的key
    let peerId = localStorage.getItem('peerId')
    console.log('獲取到peerId', peerId);
    // 建立發(fā)送者的連接
    let conn = peerObj.obj.connect(peerId)
    // 把接收者的id發(fā)送回去
    conn.on('open', () => {
      conn.send('你好發(fā)送者，我是接收者，我收到了你的請求。')
    })
  })
  // 監(jiān)聽發(fā)送者的信息
  peerObj.obj.on('connection', function (conn) {
    conn.on('data', (data) => {
      console.log('收到發(fā)送者的消息', data);
      // 將data數(shù)據(jù) 通過Uint8Array()方法 轉(zhuǎn)為TypedArray類型再進行讀寫
      // console.log(new Uint8Array(data));
      //使用 btoa() 方法用于創(chuàng)建一個 base-64 編碼的字符串
      // String.fromCharCode() 可接收一個指定的Unicode 值，然后返回一個字符串。
      priviewImg.value = 'data:image/png;base64,' + btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      // console.log(priviewImg.value);
    });
  })
?
?
}
// 上傳圖片
const upImgFn = (e) => {
  console.log(e.target.files);
  let obj = e.target.files[0]
  // 轉(zhuǎn)為二進制blob對象，用于保存大文件
  const blobVal = new Blob(e.target.files, { type: obj.type })
  // 通過URL.createObjectURL(blobVal) 可以獲取一個當前文件的一個內(nèi)存URL
  priviewImg.value = URL.createObjectURL(blobVal)
  // 發(fā)送圖片給接收者
  sendFn(blobVal)
}
?
// 發(fā)送事件
const sendFn = (blobVal) => {
  // 獲取對方ID
  let peerId = localStorage.getItem('peerId')
  // 建立連接
  let connObj = peerObj.obj.connect(peerId)
  connObj.on('open', () => {
    // 發(fā)送信息給對方
    connObj.send(blobVal)
  })
}
?
?
</script>
?
<style>
</style>

結(jié)果顯示

發(fā)起者請求連接，接收者接收連接后，發(fā)送者上傳一個png圖片，接收者也能正常收到。