javascript - Javascript——如何创建连接独立变量
问题描述
我正在为我和一群朋友开发一个简单的聊天室。我使用 socket.io、nodeJS、HTML5 JavaScript 和 CSS 实现了它。我想添加一个昵称功能,这样我就知道谁是谁了。到目前为止我有这个(我知道它很乱,一旦它工作我会整理它):
index.js:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/chat.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
console.log('message: ' + msg);
io.emit('chat message', msg);
});
socket.on('name input', function(nme){
console.log('Login: ' + nme);
io.emit('name input', nme);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
聊天.html:
<!doctype html>
<html>
<head>
<title>TheChatWeb || Web Edition 0.0.2</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Heebo:900');
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; background: #bcbcbc; }
form { padding: 10px; position: fixed; bottom: 0; width: 100%;}
form input { border: 0; padding: 10px; width: 90%; border-top-left-radius: 25px; border-bottom-left-radius: 25px; border-right-style: none; margin-right: 0%; }
form button { width: 9%; background: #d9d9d9; border-size: 2%; border-style: solid; border-color: #c1c1c1; border-top-right-radius: 25px; border-bottom-right-radius: 25px; padding: 10px; margin-left: 0%; }
#messages { list-style-type: none; margin: 5%; padding: 10px; border-style: solid; border-color: #32CD32; border-radius:20px; background: #d9d9d9; }
#messages li { padding: 5px 10px; border-radius: 10px; }
#messages li:nth-child(odd) { background: #eee; }
ul{ position: relative; }
html {
scroll-behavior: smooth;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
</style>
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<input placeholder="Enter your nickname here!" id="nameField" autocomplete="off" minlength="3" maxlength="15"/><button id="nameGo">Go!<button>
</div>
</div>
<div style="text-align:center;item-align:center;font-family: 'Heebo', sans-serif;font-size:180%;">
TheChatWeb <hr style="margin-left:35%;" color="blue" size="1px" width="30%"> Web Edition 0.0.2
</div>
<ul id="messages"></ul>
<form action="">
<input placeholder="Enter your message here!" id="m" autocomplete="off" minlength="2" maxlength="185"/><button>Send</button>
<div id="char-count"></div>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("nameGo");
// When the page loads, open the modal
document.addEventListener("DOMContentLoaded", function(){
modal.style.display = "block";
});
$(function () {
var uname;
var socket = io();
$('form').submit(function(e){
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(uname + ": " + msg));
window.scrollTo(0,document.body.scrollHeight);
});
socket.on('user connected', function(notify){
$('#messages').append($('<li>').text(notify));
window.scrollTo(0,document.body.scrollHeight);
});
socket.on('user disconnected', function(notify){
$('#messages').append($('<li>').text(notify));
window.scrollTo(0,document.body.scrollHeight);
});
socket.on('name input', function(nme){
$('#messages').append($('<li>').text(nme + " joined the chat! Say hi!"));
uname = nme;
window.scrollTo(0,document.body.scrollHeight);
});
btn.onclick = function() {
modal.style.display = "none";
socket.emit('name input', $('#nameField').val());
}
});
</script>
</html>
现在,我的问题是,如果我在 PowerShell 中使用“node index.js”运行它,它可以正常工作,直到其他人登录,然后我的用户名也会更改为他们的。我想知道是否有一种方法可以将用户名仅存储在客户端,而不是像现在这样发送给每个人。任何和所有的帮助都非常感谢,谢谢!
(是的,我是新手,这是我的第一个 NodeJS 应用程序,请善待。)
我的 index.js 和@ChrisG 的解决方案:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var users = {};
app.get('/', function(req, res){
res.sendFile(__dirname + '/chat.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
console.log('message: ' + msg);
io.emit('chat message', msg);
});
socket.on('name input', function(nme){
console.log('Login: ' + nme);
users[socket.id] = { name: nme };
io.emit('name input', nme);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
解决方案
推荐阅读
- python - 写入excel csv文件python中的特定行而不覆盖其他列。Python
- c# - Unity C#如何在未选中刚体约束的情况下实例化对象
- asp.net-core - 如何在网络场上部署 Asp.Net Core 应用程序?
- java - 将集合中的元素类型传递给初始化 ArrayList(Java)的函数?
- kubernetes - k8s replicaSet 状态混乱
- java - 初始化 Spark 上下文时字符串索引越界异常
- javascript - 在 React Native 中设置数组映射对象的样式
- c# - 将应用程序数据层从使用 Entity Framewok 转移到使用 Web API
- c++ - 出现分段错误不知道如何解决我知道它在哪里
- swift - 如何从确定的路径中删除 usr/local/include 中的所有符号链接