socket.io将数据从服务器发送到客户端

时间:2020-10-12 07:30:00

标签: node.js express socket.io

我正在尝试从服务器端向客户端发送一些json对象。

var express = require('express');
var app = express();
var server = app.listen(1337);
var io = require('socket.io').listen(server);

var json = {
  var1: 1,
  var2: 2,
  var3: 3,
};

io.on('connection', function(json) {
  io.send('message', json);
});

app.listen(3000);

以及index.html

<!DOCTYPE html>


<html>
<head></head>
<body>

<script src="https://cdn.socket.io/socket.io-1.0.0.js"></script>


<script>
    var socket = io.connect('http://localhost:3000');
  
    socket.on('message', function(data) {
      console.log(data);
    });
</script>


</body>

</html>

我不断收到此错误

通过'http:// localhost:3000 / socket.io /访问XMLHttpRequest? EORS = 2&transport = polling&t = 1602487581123-0'来自原点'null'已被CORS政策阻止:否 请求的资源上显示“ Access-Control-Allow-Origin”标头。

1 个答案:

答案 0 :(得分:0)

在服务器端使用"socket.io": "^2.3.0",,将服务器端代码更改为以下代码:

var express = require('express');
var app = express();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

var json = {
  var1: 1,
  var2: 2,
  var3: 3,
};

io.on('connection', function() {
  io.send('message', json);
});

http.listen(3000, () => console.log('HTTP server is listening on port 3000'));

对于CORS标头,默认情况下允许任何起源。

我建议您在客户端使用最新版本的socket.io。您可以使用此CDN

客户端:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.js" integrity="sha512-AcZyhRP/tbAEsXCCGlziPun5iFvcSUpEz2jKkx0blkYKbxU81F+iq8FURwPn1sYFeksJ+sDDrI5XujsqSobWdQ==" crossorigin="anonymous"></script>


<script>
    var socket = io.connect('http://localhost:3000');
  
    socket.on('message', function(data, json) {
      console.log(data, json);
    });
</script>
</body>
</html>

为客户端创建HTTP服务器:

☁  64313396 [master] ⚡  http-server  -p 3001
Starting up http-server, serving ./public
Available on:
  http://127.0.0.1:3001
  http://172.31.160.227:3001
  http://10.23.128.81:3001

浏览器控制台的输出:

enter image description here