Websocket使用教程

一、WebSocket是什么

WebSocket为浏览器和服务器之间提供了一种新的实时通信协议。与HTTP不同，它允许服务器主动发送数据给客户端。在使用WebSocket之前，Web开发人员总是使用轮询技术来实现实时通讯。轮询技术往往需要在客户端和服务器之间频繁发送大量的请求；然而，WebSocket仅需建立一次连接，之后服务器与客户端之间就可以互相发送数据。WebSocket还支持完整的双向通信，你可以在客户端和服务器之间进行实时对话。

二、WebSocket基本用法

要在页面使用WebSocket，我们要实例化WebSocket对象并通过它与服务器通信。以下是一个最简单的WebSocket页面：

 var ws = new WebSocket("wss://echo.websocket.org");

 ws.onopen = function(event) {
   console.log("Opened");
   ws.send("Hello Server!");
 };

 ws.onmessage = function(event) {
   console.log( "Message received:", event.data );
 };

 ws.onclose = function(event) {
   console.log("Closed");
 };

我们创建一个新的WebSocket，并连接到wss://echo.websocket.org上。在连接到服务器之后，我们发送了消息并侦听了来自服务器的消息。

三、WebSocket对象的属性与方法

1、WebSocket.readyState

此属性返回连接状态，具有4个可能的值：

• WebSocket.CONNECTING: 正在连接
• WebSocket.OPEN: 已连接
• WebSocket.CLOSING: 正在关闭
• WebSocket.CLOSED: 已关闭

下面是使用readyState属性的例子：

 var ws = new WebSocket("wss://echo.websocket.org");

 if (ws.readyState === WebSocket.OPEN) {
   console.log("Connected!");
 } else {
   console.log("Not Connected!");
 }

2、WebSocket.send()

此方法允许客户端向服务器发送数据。你可以发送文本、二进制和blob数据。

 var ws = new WebSocket("wss://echo.websocket.org");

 ws.onopen = function(event) {
   ws.send("Hello Server!");
 };

3、WebSocket.close()

此方法关闭WebSocket连接。

 var ws = new WebSocket("wss://echo.websocket.org");

 ws.onclose = function(event) {
   console.log("Closed!");
 };
 
 ws.close();

四、服务端的实现

我们通过Node.js的ws模块来创建WebSocket服务器。ws是一个简单且易于使用的WebSocket库，具有很好的性能和广泛的浏览器支持。

 const WebSocket = require('ws');

 const server = new WebSocket.Server({ port: 8080 });

 server.on('connection', function connection(ws) {
   ws.send('Hello! Welcome to our WebSocket server!');

   ws.on('message', function incoming(message) {
     console.log('received: %s', message);
   });

   ws.on('close', function close() {
     console.log('disconnected');
   });
 });

我们创建了WebSocket服务器并监听8080端口。当连接建立时，我们发送了一条欢迎消息到客户端，并向控制台输出收到的所有消息和连接关闭事件。

五、WebSocket安全

WebSocket支持加密的连接（wss）。为了确保连接安全，请使用wss而不是ws协议。可以使用自己的SSL证书来加密连接，也可以使用第三方证书。

以下是使用Node.js创建wss连接的例子：

 const https = require('https');
 const fs = require('fs');
 const WebSocket = require('ws');

 const server = https.createServer({
   cert: fs.readFileSync('/path/to/cert.pem'),
   key: fs.readFileSync('/path/to/key.pem')
 });

 const wss = new WebSocket.Server({ server });

 wss.on('connection', function(ws, req) {
   console.log(`New Connection from ${req.socket.remoteAddress}`);
 });

在此示例中，我们在创建WebSocket服务器之前创建了HTTPS服务器。我们使用SSL证书启用HTTPS。随后，我们创建了WebSocket服务器并监听HTTPS服务器。