接下来我详细讲解“NodeJS简单实现WebSocket功能示例”的完整攻略。
WebSocket简介
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 从开始握手时就与 HTTP 具有相似之处，因此能够通过现有的 HTTP 端口（80 和 443）进行通信，避免了被防火墙过滤的风险。WebSocket 网络通信协议可以在不提供 HTTP 帮助的情况下，实现客户端和服务器之间的实时双向数据传输。
基础知识
-
WebSocket 握手过程服从 HTTP 协议；
-
WebSocket 彼此之间是平等的双向通信，可以发送消息到任何一方，可以是客户端也可以是服务端；
-
WebSocket 有着一套自己的协议和标准；
-
WebSocket 是基于 TCP 的，相比于 HTTP 更加适合在高并发下使用。
示例一
下面，我们通过一个简单的 WebSocket 实例来了解实现 WebSocket 的过程。
实现步骤
- 安装
ws模块，可以通过以下命令安装：
npm install ws --save
- 编写服务器代码。在服务器代码中，我们需要创建一个 WebSocket 服务器，并监听绑定的端口。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
});
ws.send('something');
});
- 启动服务器，在命令行中执行以下命令：
node server.js
- 客户端代码实现。下面是一个简单的 JavaScript 代码，实现了连接到服务器上，并发送一条消息的功能。
const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:8080');
ws.on('open', function open() {
ws.send('hello server');
});
ws.on('message', function incoming(data) {
console.log(data);
});
实例效果
在控制台中可以看到如下输出：
received: hello server
示例二
下面，我们用 Express 搭建一个服务器，实现 WebSocket 交互。
实现步骤
- 安装
express和ws模块，可以通过以下命令安装：
npm install express ws --save
- 编写服务器代码。使用 Express 搭建一个服务器，监听
3000端口，并开启 WebSocket 功能。
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const WebSocket = require('ws');
const wss = new WebSocket.Server({ server });
wss.on('connection', function connection(ws) {
console.log('client connected');
ws.on('message', function incoming(message) {
console.log('received: %s', message);
ws.send(`message: ${message}`);
});
ws.on('close', function () {
console.log('client disconnected');
});
});
server.listen(3000, function () {
console.log('server started on port 3000');
});
- 启动服务器，在命令行中执行以下命令：
node server.js
- 客户端代码实现。下面是一个简单的 JavaScript 代码，实现了连接到服务器上，并发送一条消息的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Test</title>
</head>
<body>
<form>
<input id="message" type="text" placeholder="Enter message" autofocus>
<button id="send">Send</button>
</form>
<script>
const socket = new WebSocket('ws://localhost:3000');
socket.onopen = function (event) {
console.log('WebSocket connected', event);
};
socket.onmessage = function (event) {
console.log('WebSocket message received', event.data);
};
socket.onclose = function (event) {
console.error('WebSocket closed', event);
};
document.getElementById('send').addEventListener('click', function (event) {
event.preventDefault();
const message = document.getElementById('message').value;
console.log('send message', message);
socket.send(message);
});
</script>
</body>
</html>
实例效果
打开浏览器访问 http://localhost:3000，在输入框中输入消息并点击“Send”按钮，可以在控制台中看到如下输出：
WebSocket connected Event {isTrusted: true, type: "open", target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}
send message hello world
WebSocket message received message: hello world
至此，NodeJS 的 WebSocket 功能已经实现。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：NodeJS简单实现WebSocket功能示例 - Python技术站
微信扫一扫 
支付宝扫一扫 