个人中心
gpt4 book ai didi

javascript - 使用 Socket.io 广播消息时出现问题

转载 作者：行者123 更新时间：2023-11-30 14:30:00 24 4
gpt4 key购买 nike

我试图在用户开始输入时输出“XYZ 正在输入”消息，但我似乎无法修复我的代码。我觉得好像我代码的 App.JS 中的“socket.broadcast.emit”是问题所在，但我不确定。如果可能的话，有人可以指出正确的方向来帮助我修复我的聊天应用程序。提前致谢!

索引.HTML

<!doctype html>
 <html>
 <head>
  <title>Chit Chat</title>
  <link rel="stylesheet" href="/css/styles.css">
 </head>
  <body>

   <ul id="messages"></ul>
   <div id="typing"></div>

   <form action="">
    <input id="username" placeholder="Username" type="text" />
    <input id="message-box" autocomplete="off" type="text" placeholder="Type Message" />
    <button id="button">Send</button>
   </form>


 <script src="/socket.io/socket.io.js"></script>
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script src="/js/scripts.js" charset="utf-8"></script>
 </body>
</html>

App.JS(服务器)

var express = require('express');
var app = require('express')();
var bodyParser = require('body-parser');
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}))
app.use(express.static('./public'));

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

var port = process.env.PORT || 3000;

http.listen(port, function(){
 console.log('listening on ' + port);
});

// Socket.io
io.on('connection', function(socket) {
 // when the client emits 'new message', this listens and executes
 socket.on('new message', function(data) {
  // we tell the client to execute 'new message'
  io.sockets.emit('new message', data);
 });
// when the client emits 'typing', we broadcast it to others
 socket.on('typing', function(data){
  socket.broadcast.emit('typing', data);
 });
});

脚本.JS

console.log('Loaded');
var socket = io();

$(function (){
 chat();
 emitEvents();
 isTyping();
});

function chat() {
 $('form').submit(function(e){
  var message = {
  username: $('#username').val(),
  message: $('#message-box').val()
  }
  e.preventDefault();
  socket.emit('new message', message);
   $('#message-box').val('');
  });
}

function isTyping() {
 $('#message-box').keypress(function() {
  socket.emit('typing', $('#username').val());
 });
}

function emitEvents() {
 socket.on('typing', function(data){
  console.log(data);
  $('#typing').append($('<p>').text(data + 'is typing'));
 });
 socket.on('new message', function(data){
  $('#messages').append($('<li>').text(data.username + ': ' + 
  data.message));
 });
}

最佳答案

我试过你的代码，它工作正常。我创建了一个 live example .

我在 scripts.js 中做了 2 处修改，所以输入消息只会在输入过程中出现一次。

function emitEvents() {
    socket.on('typing', function(data){
        console.log(data);
        $('#typing').html($('<p>').text(data + ' is typing')); // update
    });
    socket.on('new message', function(data){
        $('#typing').html($('<p>').text('')); // update
        $('#messages').append($('<li>').text(data.username + ': ' + data.message));
    });
}

代码socket.broadcast.emit表示发送给除sender以外的所有客户端。

查看 Socket.IO cheatsheet .

关于javascript - 使用 Socket.io 广播消息时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51354573/

24 4 0
文章推荐： javascript - currentArray.forEach 不是函数(Fetch API)
文章推荐： c - ANSI C : Passing array by value generates weird error I can not solve
文章推荐： 更改系统头文件路径和自定义头文件
文章推荐： javascript - 将参数值组合到 Jquery 中的变量名
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com