【问题标题】:How to call functions from client side in room in socket.io?如何在socket.io的房间中从客户端调用函数?
【发布时间】:2020-10-09 19:21:06
【问题描述】:

我如何在套接字的特定房间中调用下面的所有函数我成功创建了房间并通过 connectToRoom 函数加入了它,但现在我想调用我在服务器端发出的其他函数但我只收到打印的消息“你是在 1 号房间”

app.js

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

 app.get('/', function(req, res) {
 res.sendfile('index.html');
});

io.on('connection', async (socket) => {
console.log('socket connected')

 const userId =  socket.id
 //  const emailId= await fetchemailId(socket); default room
 io.sockets.adapter.rooms
 socket.join(userId);

 //Send this event to everyone in the room.
 io.sockets.in("room-"+userId).emit('connectToRoom', "You are in room no. "+userId);
 io.to(userId).emit('Image upload');
 console.log(sockets.rooms)
 io.to(userId).emit('progress', "Image is Uploading started Please Wait A minute");
 io.to(userId).emit('error', "clients connected!");

});


http.listen(3000, function() {
   console.log('listening on localhost:3000');
});

默认房间reference

index.html

 <!DOCTYPE html>
 <html>

 <head>
     <title>Hello world</title>
 </head>
 <script src="/socket.io/socket.io.js"></script>

 <script>
   var socket = io();

    socket.on('connectToRoom', function (data) {
       document.body.innerHTML = '';
       document.write(data);

         socket.on('error', function (data) {
         document.body.innerHTML = '';
         document.write(data)
       });
         socket.on('progress', function (data) {
         document.body.innerHTML = '';
         document.write(data)
      });

 </script>

 <body></body>

 </html>

【问题讨论】:

  • 您可以只调用您的函数,但将它们放在客户端的事件侦听器下。所以每次从后端向前端触发事件时,都会调用前端事件监听器下的函数。
  • 表示代码完美
  • 不是吗?它不工作吗?如果是这样,会出现什么错误?
  • 我已经添加了这两个功能,但它只显示了浏览器中的房间号而不是进度功能

标签: node.js express sockets socket.io


【解决方案1】:

将所有套接字代码添加到我在下面提到的一个函数中

导入jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

功能

 $(document).ready(function () { 
      //socket.io code
 });

【讨论】:

    猜你喜欢
    • 2015-10-06
    • 2012-06-06
    • 2018-01-09
    • 2015-08-17
    • 2021-03-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-05
    相关资源
    最近更新 更多