WebSocket 和 Socket.IO

WebSocket

WebSocket 是一种网络通信协议,它提供了全双工(full-duplex)通信通道,允许服务器和客户端之间进行双向通信。这种通信方式比传统的 HTTP 请求/响应模式更高效,因为它减少了网络延迟,并且只需要一个 TCP 连接就可以进行双向通信。

WebSocket 的工作流程如下:

    1. 客户端发送一个 HTTP 请求到服务器,这个请求包含一个 "Upgrade: websocket" 头部,表示客户端希望升级到 WebSocket 协议。

    2. 如果服务器支持 WebSocket 协议,它会返回一个包含 "101 Switching Protocols" 状态码的 HTTP 响应,表示服务器同意升级到 WebSocket 协议。

    3. 一旦协议升级完成,客户端和服务器就可以在同一个 TCP 连接上进行双向通信。

以下是一个使用 Node.js 的 WebSocket 服务器的示例:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
	ws.on('message', message => {
		console.log('received: %s', message);
	});
	ws.send('Hello! I am a WebSocket server.');
});

在这个示例中,服务器监听 8080 端口的 WebSocket 连接。当有新的连接建立时,服务器会发送一条消息给客户端。当服务器接收到客户端的消息时,它会打印这条消息。

WebSocket 协议是 HTML5 的一部分,大多数现代浏览器都支持 WebSocket 协议。以下是一个在浏览器中使用 WebSocket 的示例:

const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
	ws.send('Hello! I am a WebSocket client.');
};
ws.onmessage = event => {
	console.log('received: %s', event.data);
};

在这个示例中,浏览器创建一个新的 WebSocket 连接到服务器。当连接建立时,浏览器会发送一条消息给服务器。当浏览器接收到服务器的消息时,它会打印这条消息。

WebSocket 协议非常适合实时应用,如聊天应用、多人在线游戏、实时股票报价等。

Socket.IO 

Socket.IO 是一个基于 Node.js 的库,它提供了实时、双向和基于事件的通信能力。它主要由两部分组成:在服务器端的 Node.js 库和在客户端的 JavaScript 库。Socket.IO 不仅支持 WebSocket,还支持许多其他的传输机制,如 AJAX 长轮询、AJAX 多路复用等,以实现实时通信。

Socket.IO 的主要特点包括:

    1. 实时分析:你可以在服务器端推送实时事件到客户端。

    2. 二进制支持:你可以发送图片、视频或者任何二进制数据。

    3. 文档同步:当一个文档更新时,你可以将更新的内容实时推送到所有的客户端。

    4. 实时聊天:你可以创建一个实时聊天应用。

以下是一个使用 Socket.IO 的示例:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
	console.log('a user connected');

	socket.on('disconnect', () => {
		console.log('user disconnected');
	});

	socket.on('chat message', (msg) => {
		io.emit('chat message', msg);
	});
});

server.listen(3000, () => {
	console.log('listening on *:3000');
});

在这个示例中,服务器监听 3000 端口的连接。当有新的连接建立时,服务器会打印一条消息。当连接断开时,服务器也会打印一条消息。当服务器接收到 'chat message' 事件时,它会将这个消息广播给所有的客户端。

在客户端,你可以使用 Socket.IO 的客户端库来连接到服务器,并发送和接收事件。以下是一个在浏览器中使用 Socket.IO 的示例:

const socket = io();

$('form').submit(function(e) {
	e.preventDefault(); // prevents page reloading
	socket.emit('chat message', $('#m').val());
	$('#m').val('');
	return false;
});

socket.on('chat message', function(msg) {
	$('#messages').append($('
  • ').text(msg)); });
  • 在这个示例中,当用户提交表单时,浏览器会发送一个 'chat message' 事件到服务器,并清空输入框。当浏览器接收到 'chat message' 事件时,它会将这个消息添加到消息列表中。

    你可能感兴趣的:(前端面试题,websocket,网络协议,网络)