环境搭建
WebRTC 环境搭建-****博客
前言
对于我们WebRTC项目而言,nodejs主要是实现信令服务器的功能,客户端和服务器端的交互我们选择websocket作 为通信协议,所以该章节的实战以websocket的使用为主。 web客户端的websocket和nodejs服务器端的websocket有一定的差别,所以我们分开两部分进行讲解。
客户端
现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器 对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即 浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一 部分,显然这样会浪费很多的带宽等资源。
WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
主要特点:
-
全双工通信:
- WebSocket 建立连接后,客户端和服务器可以在任意时刻相互发送数据,无需遵循请求-响应模式。
- 这使得它非常适合实时通信应用,如聊天、股票行情、多人游戏等。
-
持久连接:
- WebSocket 连接建立后会一直保持打开状态,直到一方主动关闭。
- 这与传统的 HTTP 请求-响应模式不同,HTTP 连接在一次请求后就会立即关闭。
-
低延迟:
- WebSocket 协议的数据帧比 HTTP 报文小,并且没有重复的 HTTP 头信息,因此传输延迟更低。
-
二进制数据传输:
- WebSocket 支持传输文本数据和二进制数据,非常适合传输图像、视频等多媒体内容。
-
跨域支持:
- WebSocket 连接建立时会自动执行跨域检查,无需额外的跨域配置。
-
较低的通信开销:
- WebSocket 协议头部较小,相比 HTTP 协议减少了大量的开销。
WebSocket 相比 Ajax 轮询的优势也非常正确。WebSocket 可以实现真正的实时双向通信,大大减少了网络开销和延迟。这使得 WebSocket 在实时应用领域有着广阔的应用前景。
总的来说,WebSocket 为 Web 客户端和服务器之间的通信带来了革命性的变革,必将在未来的 Web 开发中扮演越来越重要的角色。
代码示例
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
// WebSocketClient.js
// 创建 WebSocket 连接
const webSocket = new WebSocket('ws://example.com/websocket');
// 监听 WebSocket 事件
webSocket.onopen = function() {
console.log('WebSocket connection established.');
};
webSocket.onmessage = function(event) {
console.log('Received message:', event.data);
};
webSocket.onclose = function() {
console.log('WebSocket connection closed.');
};
webSocket.onerror = function(event) {
console.error('WebSocket error:', event.data);
};
// 发送消息的函数
function sendMessage(message) {
if (webSocket.readyState === WebSocket.OPEN) {
webSocket.send(message);
console.log('Sent message:', message);
} else {
console.error('WebSocket connection is not open.');
}
}
// 示例使用
sendMessage('Hello, WebSocket!');
Nodejs服务器 websocket
服务器端使用websocket需要安装nodejswebsocket
sudo npm init -y
sudo npm install nodejs-websocket
我们只要关注:
(1)如何创建websocket服务器,通过createServer和listen接口;
(2)如何判断有新的连接进来,createServer的回调函数判断;
(3)如何判断关闭事件,通过on("close", callback) 事件的回调函数;
(4)如何判断接收到数据,通过on("text", callkback)事件的回调函数;
(5)如何判断接收异常,通过on("error", callkback)事件的回调函数;
(6)如何主动发送数据,调用sendText
代码示例
const WebSocket = require('ws');
// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 });
// 监听 WebSocket 连接事件
wss.on('connection', (ws) => {
console.log('WebSocket client connected');
// 监听消息事件
ws.on('message', (message) => {
console.log('Received message:', message);
// 向所有连接的客户端广播消息
wss.clients.forEach((client) => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
// 监听关闭事件
ws.on('close', () => {
console.log('WebSocket client disconnected');
});
// 监听错误事件
ws.on('error', (error) => {
console.error('WebSocket error:', error);
});
});
console.log('WebSocket server started on port 8080');
总结
本章节主要介绍后续信令服务器的协议websocket基本运用,后续对信令服务器进行详细描述
学习资料分享
0voice · GitHub