如何使用JavaScript进行WebSocket服务器编写和跨域通信处理？

文章标签： JavaScript 服务器 Web websocket

2023-05-04 00:30:06 发布

WebSocket服务器编写

WebSocket是一种在单个TCP连接上进行全双工通信的协议。使用WebSocket，客户端和服务器之间可以发送消息而不需要任何请求和响应，因此它可以实现实时性更高的双向通信。

在JavaScript中，可以使用WebSocket API来编写WebSocket服务器。

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('Client connected');

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

  ws.send('Hello, client!');
});

上述代码创建了一个WebSocket服务器，监听8080端口。当有客户端连接到服务器时，服务器会打印出“Client connected”消息，并且在收到客户端发送的消息时，会打印出该消息。同时，服务器会向客户端发送“Hello, client!”消息。

跨域通信处理

由于浏览器的同源策略限制，JavaScript不能直接从一个域的页面向另一个域的页面发起网络请求。为了解决这个问题，可以使用跨域通信技术，例如JSONP、CORS和WebSocket。

CORS

跨域资源共享（CORS）是一种机制，它使用额外的HTTP头来告诉浏览器，当前页面的脚本有权限访问来自该域的指定资源。在服务器端，需要设置响应头来允许跨域访问。

const http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST',
    'Access-Control-Allow-Headers': 'Content-Type'
  });

  // handle request
}).listen(8080);

上述代码创建了一个HTTP服务器，监听8080端口。当浏览器向该服务器发起请求时，在响应头中添加了“Access-Control-Allow-Origin”、“Access-Control-Allow-Methods”和“Access-Control-Allow-Headers”字段，允许跨域访问。

WebSocket跨域通信

WebSocket不受同源策略限制，因此可以直接在JavaScript中发起跨域WebSocket通信。但是，在服务器端需要设置响应头来允许跨域访问。

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('Client connected');

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

  ws.send('Hello, client!');

  // allow cross-origin access
  ws.on('headers', function headers(headers) {
    headers.push('Access-Control-Allow-Origin: *');
  });
});

上述代码创建了一个WebSocket服务器，监听8080端口。当有客户端连接到服务器时，服务器会打印出“Client connected”消息，并且在收到客户端发送的消息时，会打印出该消息。同时，服务器会向客户端发送“Hello, client!”消息。在服务器端，通过监听“headers”事件，在响应头中添加“Access-Control-Allow-Origin”字段，允许跨域访问。

2023-05-06 08:08:58 更新

上一篇：在React中，如何使用React Context进行全局状态共享和更改监听？下一篇：如何在 PHP 中设置和获取 cookie？

相关推荐