最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

如何附加聊天并在socket.io中显示井类?

IT培训 admin 7浏览 0评论

如何附加聊天并在socket.io中显示井类?

我正在使用socket.io和nodejs构建一个聊天应用程序。我有这些问题 - 当我刷新页面时它添加了另一个连接的客户端 - 当我断开它时不切片 - 当我发送消息时它不会出现在div“井”中

我试图改变div'好'

/server.就是

var http = require('http');
var express = require('express'),
 app = module.exports.app = express();

var server = http.createServer(app);
var io = require('socket.io').listen(server);  //pass a http.Server instance

//now you can use app and io
users=[];
connections = [];

//server.listen(process.env.PORT || 3000); // this is another way of port listen
console.log('Server running...');

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

//create connections
io.on('connection', function(socket){
    connections.push(socket);
    console.log('connected: %s sockets connected', connections.length);

    //disconnect /////////////////////// doesn't work ////////////////////////////
io.on('disconnection', function(data){
        connections.slice(connections.indexOf(socket), 1);
        console.log('disconnected: %s sockets connected', connections.length);
});

  // send message
    socket.on('send message', function (data){
      console.log(data);
      io.sockets.emit('new message', {msg: data});

    });
  });

server.listen(80);  //listen on port 80   

/client.HTML

  <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="well">
            <h3>Online Users</h3>
            <ul class="list-group" id="users">
            </ul>
          </div>
        </div>
        <div class="col-md-8">
          <div class="chat" id="chat">
          </div>
          <form id="messageForm" action="index.html" method="post">
            <div class="form-group">
              <label> Enter Message</label>
              <textarea class="form-control" id="message" name="name" rows="8" cols="80"></textarea>
              <br >
              <input type="submit" class="btn btn-primary" name="" value="Send Message" />
            </div>
          </form>
        </div>
      </div>
    </div>

/ client js

<script src="/socket.io/socket.io.js"></script>
    <script>
      $(function(){
        var socket = io.connect();
        var $messageForm = $('#messageForm');
        var $message = $('#message');
        var $chat = $('#char');

        $messageForm.submit(function (e) {
          e.preventDefault();
          console.log('submitted');
          socket.emit('send message', $message.val());
          $message.val('');
        });

        socket.on('new message', function(data){
          // $chat.append('<div class="well">' +data.msg+ '</div>');
          $chat.append('<ul class="list-group" id="users">' +data.msg+ '</ul>');
        });
      });
    </script> 

我只想聊天.append();上班。

回答如下:

问题出在这里

   var $chat = $('#char');

你的代码没有id为char的div。您已经提到过该消息应该附加在div well中,以便您可以使用

var $chat = $('#well');

或者有一个id为chat的div

var $chat = $('#chat');

如何附加聊天并在socket.io中显示井类?

我正在使用socket.io和nodejs构建一个聊天应用程序。我有这些问题 - 当我刷新页面时它添加了另一个连接的客户端 - 当我断开它时不切片 - 当我发送消息时它不会出现在div“井”中

我试图改变div'好'

/server.就是

var http = require('http');
var express = require('express'),
 app = module.exports.app = express();

var server = http.createServer(app);
var io = require('socket.io').listen(server);  //pass a http.Server instance

//now you can use app and io
users=[];
connections = [];

//server.listen(process.env.PORT || 3000); // this is another way of port listen
console.log('Server running...');

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

//create connections
io.on('connection', function(socket){
    connections.push(socket);
    console.log('connected: %s sockets connected', connections.length);

    //disconnect /////////////////////// doesn't work ////////////////////////////
io.on('disconnection', function(data){
        connections.slice(connections.indexOf(socket), 1);
        console.log('disconnected: %s sockets connected', connections.length);
});

  // send message
    socket.on('send message', function (data){
      console.log(data);
      io.sockets.emit('new message', {msg: data});

    });
  });

server.listen(80);  //listen on port 80   

/client.HTML

  <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="well">
            <h3>Online Users</h3>
            <ul class="list-group" id="users">
            </ul>
          </div>
        </div>
        <div class="col-md-8">
          <div class="chat" id="chat">
          </div>
          <form id="messageForm" action="index.html" method="post">
            <div class="form-group">
              <label> Enter Message</label>
              <textarea class="form-control" id="message" name="name" rows="8" cols="80"></textarea>
              <br >
              <input type="submit" class="btn btn-primary" name="" value="Send Message" />
            </div>
          </form>
        </div>
      </div>
    </div>

/ client js

<script src="/socket.io/socket.io.js"></script>
    <script>
      $(function(){
        var socket = io.connect();
        var $messageForm = $('#messageForm');
        var $message = $('#message');
        var $chat = $('#char');

        $messageForm.submit(function (e) {
          e.preventDefault();
          console.log('submitted');
          socket.emit('send message', $message.val());
          $message.val('');
        });

        socket.on('new message', function(data){
          // $chat.append('<div class="well">' +data.msg+ '</div>');
          $chat.append('<ul class="list-group" id="users">' +data.msg+ '</ul>');
        });
      });
    </script> 

我只想聊天.append();上班。

回答如下:

问题出在这里

   var $chat = $('#char');

你的代码没有id为char的div。您已经提到过该消息应该附加在div well中,以便您可以使用

var $chat = $('#well');

或者有一个id为chat的div

var $chat = $('#chat');
发布评论

评论列表 (0)

  1. 暂无评论