【发布时间】：2024-05-23 23:00:02
【问题描述】：
我正在寻找一种实现聊天功能的方法，
我正在为残障人士建立一个约会/友谊网站，进展顺利。
由于我是编程领域的初学者，我一直在寻找一种方法来创建一个简单的聊天功能（理想情况下，只有在相互喜欢或感兴趣时才起作用），所以我在 youtube 上找到了一个-[ https://www.youtube.com/watch?v=tHbCkikFfDE] ，完美，无需重新加载页面等。
在 Localhost:3000 上打开它时它就像一个魅力，但是我尝试在我的网站上实现它，它显示，但不起作用，这个聊天也有登录功能，但考虑到当客户端打开时我的网站他们已经登录了。我想知道如何获取我的用户数据，然后将其用于聊天。
chat.php 文件
<!DOCTYPE html>
<html>
<head>
<title>chat</title>
<link rel = "stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<style >
body{ margin-top: 5em;
}
</style>
</head>
<body>
<div class = "container">
<div id = "userFormArea" class= "row">
<div class = "col-md-12">
<form id = "userForm">
<div class = "form-group">
<label>Enter Username</label>
<input class = "form-control" id = "username">
<br/>
<input type="submit" class = "btn btn-primary" value = " Login"/>
</div>
</form>
</div>
</div>
<div class = "row" id = "messageArea">
<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">
<div class = "form-group">
<label>Enter Message</label>
<textarea class = "form-control" id = "message"> </textarea>
<br/>
<input type="submit" class = "btn btn-primary" value = "Send Message"/>
</div>
</form>
</div>
</div>
</div>
<script>
$(function(){
var socket = io.connect();
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
var $userFormArea = $('#userFormArea');
var $userForm = $('#userForm');
var $messageArea = $('#messageArea');
var $users = $('#users');
var $username = $('#username');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $message.val());
$message.val('');
});
socket.on('new message', function(data){
$chat.append('<div class = "well"><strong>'+data.user+'</strong>:' +
data.msg + '<div>');
});
$userForm.submit(function(e){
e.preventDefault();
socket.emit('new user', $username.val(),function(data){
if(data){
$userFormArea.hide();
$messageArea.show();
}
});
$username.val('');
});
socket.on('get users', function(data){
var html = '';
for (i = 0; i< data.length; i++){
html +='<li class = "list-group-item" >' + data[i]+ '</li>';
}
$users.html(html);
});
});
</script>
server.js 文件
var express =require('express'),
http = require('http');
var app= express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
users = [];
connections = [];
server.listen(process.env.Port || 3000);
console.log('server running ...')
app.get('/', function(req, res) {
res.sendFile(__dirname + '/chat.php');
});
io.sockets.on('connection', function(socket){
connections.push(socket);
console.log('Connected: %s sockets connected', connections.length);
socket.on('disconnect',function(data){
users.splice(users.indexOf(socket.username),1);
updateUsernames();
connections.splice(connections.indexOf(socket),1);
console.log('Disconnected: %s sockets conected', connections.length);
} );
//send message
socket.on('send message', function(data){
console.log(data)
io.sockets.emit('new message',{msg: data, user: socket.username});
});
//new User
socket.on('new user', function(data,callback){
callback(true);
socket.username = data;
users.push(socket.username);
updateUsernames();
});
function updateUsernames(){
io.sockets.emit('get users', users)
}
});
对不起，这篇文章很长，我会继续在互联网上寻找答案，所以也许我可以把这个问题说得更具体一些。提前致谢。
【问题讨论】：
标签： javascript php node.js mysqli socket.io