ajax功能完成后socket.io连接

Posted 2023-03-08

【中文标题】ajax功能完成后socket.io连接

【英文标题】：socket.io connection after completion of ajax function

【发布时间】：2018-10-13 16:02:09

【问题描述】：

在我的应用程序中，客户端首先从 nodejs 服务器调用 web 服务，以从 mongoDB 数据库中获取历史数据，以便绘制它（使用 highcharts 库）。然后我需要从服务器获取实时更新并将它们发送到客户端，为此，我想使用 socket.io 。

我正在使用 AJAX 函数来调用 web 服务，在它完成后，我正在尝试创建一个 socket.io 连接。但这不起作用。

这是我的客户端端代码的一部分：

$(function()

$.ajax(

url: 'http://localhost:3300/historicalData',
type: 'GET',
success : function(data) 
    //some code here
,
complete : function()
var socket = io('http://localhost:3300');
    //after the connexion is established, i want to do some stuff here

);
);

这是我的 server 端代码的一部分：

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

app.get("/historicalData", function(req, res)
  getData(res);
);

io.on('connection', function(socket)
  console.log('A new WebSocket connection has been established');
);

app.listen("3300", function()
  console.log('Server up: http://localhost:3300');
);

我在这里做错了什么？

在我的应用程序中使用 socket.io 的正确方法是什么？

【问题讨论】：

你在客户端定义端口了吗？ var socket = io('http://localhost:3300')

@hurricane ，现在我已经定义了它，但它还没有工作

【参考方案1】：

您可以按如下方式利用connect 回调...

complete: () => 
  const socket = io('http://localhost:3300');

  socket.on('connect', socket => 
  // do things
  );

---

此外，当您需要使用套接字服务器进行侦听时，您正在启动 express 应用程序。通过以下更改可以轻松解决此问题

// app.listen('3300');  // ordinary express app
http.listen('3300');    // socket server app

Client API reference

【讨论】：

我应该把这个回调放在客户端吗？

@Hayfa 是的，这是在客户端。我已经为你修改了上面的答案。

我尝试了你的建议，但还不行；如果这有帮助，我会在 Web 控制台中看到这些错误消息：Loading failed for the <script> with source “https://code.jquery.com/jquery-3.2.1.min.js”. localhost:3300:43Loading failed for the <script> with source “http://localhost:3300/socket.io/socket.io.js”.

@Hayfa 听起来你的服务器设置不正确，你看到express example?

确实，在将 app.listen("3300") 更改为 http.listen("3300") 后，它工作正常:)

【参考方案2】：

原来我不得不使用：http.listen("3300") 而不是：app.listen("3300")

（感谢这篇帖子的回答https://***.com/a/24811468/9638215，我找到了解决方案）

【讨论】：

您的解决方案解决了您在评估我的答案时在代码中发现的后来的错误，该错误解决了您的原始问题......使用后来发现的有缺陷的代码来修复您的原始问题会更合适坚持你开始的道路......

【参考方案3】：

创建一个全局连接，以便您可以在代码中的任何位置使用套接字。

例如，

var socket = io('http://localhost:3300',secure:true);
    $.ajax(
        url: 'http://localhost:3300/historicalData',
        type: 'GET',
        success : function(data) 
          console.log(data);
          socket.emit('emit_from_here');
        
    );
    socket.on('server_response',(res)=>
     console.log(res); 
    );

另外，在您的服务器端代码中，

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

var port = 3300;
server.listen(port,(res)=>
  console.log('Server & Socket listening on port : '+port)
)

var io = socket.listen(server);
io.sockets.on('connection', function(socket)
  socket.on('emit_from_here',()=>
    socket.emit('server_response','server response');
  )
)

app.get("/historicalData",(req,res)=>
  res.send('works well');
)

希望这会有所帮助。

【讨论】：

当我尝试您的建议时，客户端出现以下错误：ReferenceError: io is not defined

确保您已包含<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.js"></script>

它被包含在内，但在客户端 javascript 文件之后，我认为这就是它未被识别的原因。感谢您的帮助！