问题描述
我们正在制作一个聊天网络。 我用node js express、socket.io打开服务器,出现照片等错误。 我们还没有实现聊天,正在通过server.js打开服务器,出现这个错误。 我们如何解决这个问题?如何解决?
//server.js
var express = require('express');
var app = express();
var http = require('http');
var server = http.Server(app);
var socket = require('socket.io');
var io = socket(server);
var port = 5000;
app.use('/',function(req,resp) {
resp.sendFile(__dirname + '/customEmoji.html');
});
io.on('connection',function(socket) {
console.log('User Join');
});
server.listen(port,function() {
console.log('Server On !');
});
var emoji_id;
/*function readTextFile(file,callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET",file,true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4 && rawFile.status == "200") {
callback(rawFile.responseText);
}
}
rawFile.send(null);
}*/
$(function(){
/* emoji_id = $("#emoji_navigator > a").attr("id");
console.log(emoji_id);
var str = "C:\\Users\\SeaOne\\Downloads\\" + emoji_id + ".json";
console.log(str);
//usage:
readTextFile("C:\\Users\\SeaOne\\Downloads\\campuslife.json",function(text){
var data = JSON.parse(text);
console.log(data);
});
*/
// 입력창에 아무 입력도 없을 경우 'Add comment'를 기본으로 세팅
var input_area_default = $('#input_Box').html();
if(input_area_default == ''){
var default_text = 'Add Text';
$('#input_Box').html(default_text)
}
});
//esc 누르면 popup div가 사라짐
$(document).on("keyup",function() {
if (event.keyCode === 27 || event.keyCode === 13) {
$("#emoji_popup").css({"display":"none"});
}
});
//입력을 시작하면 기본 세팅인 'Add comment'를 제거
$(document).on("focus","#input_Box",function() {
var input_area_default = $('#input_Box').html()
if(input_area_default == 'Add Text'){
$('#input_Box').html('')
}
});
//이모지 버튼에 마우스 올리면 표정 바뀜
$(document).on("mouseenter",".emoji_pickup",function() {
$('#emoji_pickup_before').css("display","none");
$('#emoji_pickup_after').css("display","block");
}).on("mouseleave",function() {
$('#emoji_pickup_after').css("display","none");
$('#emoji_pickup_before').css("display","block");
});
//이모지 버튼 클릭시 이모지 목록 popup
$(document).on("click",function(){
// popup div의 size를 가져와서 위치 선정에 활용
var popupdiv_width = $('#emoji_popup').width();
var popupdiv_height = $('#emoji_popup').height();
// popup div의 위치를 설정
var position = $('.input').position();
var Boxsize = $('.input').height();
$('#emoji_popup').css("left",position.left);
$('#emoji_popup').css("top",position.top-popupdiv_height);
$("#emoji_popup").css("background-color","#FFFFFF")
$('#emoji_popup').css("display","block");
}).on("click","#emoji_popup",function(){
$("#emoji_popup").css({"display":"none"});
});
//emoji_pick
$(document).on("click",".emoji_list",function(e) {
var customemo_width = $("#custom_emoji").width();
var customemo_height = $('#custom_emoji').height();
var position = $('.input').position();
var Boxsize = $('.input').height();
$('#custom_emoji').css("left",position.left);
$('#custom_emoji').css("top",position.top-customemo_height);
$("#custom_emoji").css("background-color","#FFFFFF")
$('#custom_emoji').css("display","block");
var emoji_id = $(this).attr('id');
var imgtag = '<img id = "emo" style="width:120px; height:120px;" src="img//' + emoji_id + '.png">';
$('#custom_emoji').append(imgtag);
$('#custom_emoji').focus();
}).on("keyup",function(){
if(event.keyCode === 13){
$("#custom_emoji").css({"display":"none"});
$("#emo").detach();
}
});
$(document).on("click",function(e) {
var input_area_default = $('#input_Box').html()
if(input_area_default == 'Add Text'){
$('#input_Box').html('')
}
var emoji_id = $(this).attr('id');
var imgtag = '<img style="width:120px; height:120px" src="img/' + emoji_id + '.png">';
$('#input_Box').append(imgtag+'<br/>');
$('#input_Box').focus();
});
// Enter 키를 입력할 경우 전송처리
$(document).on("keyup",function() {
var inputarea = $('#input_Box');
inputarea.scrollTop(inputarea[0].scrollHeight);
if (event.keyCode === 13) {
var input_area_default = $('#input_Box').html();
$('#input_Box').html('');
$('#msg').append(input_area_default);
var textarea = $('#msg');
textarea.scrollTop(textarea[0].scrollHeight);
}
});
@charset "utf-8";
#msg{
border: 1px white solid;
width: 400px;
height: 650px;
background-color : #525252;
/*margin-left: 50px;*/
font-size : 20px;
overflow: auto;
margin: auto;
color : white;
text-align : right;
}
#input_Box{
border: 1px white solid;
width: 350px;
height: 40px;
overflow: auto;
margin-top: 8px;
padding-left: 5px;
padding-top: 8px;
color : white;
}
.input{
width: 350px;
height : 50px;
display: inline-block
}
.send {
width: 400px;
height : 50px;
margin: auto;
background-color : #525252;
}
.emoji{
width: 32px;
display: inline-block;
margin : 5px;
}
.emoji_pickup{
cursor: pointer;
display : block;
}
#emoji_pickup_before{
margin-top: 5px;
margin-right: 10px
}
#emoji_pickup_after{
margin-top: 5px;
margin-right: 10px;
display: none
}
#emoji_popup{
display: none;
margin-top : -250px;
border: 1px #ffcd05 solid;
width: 400px;
height: 200px;
overflow: auto;
}
#custom_emoji{
display: none;
margin-top : -250px;
border: 1px #ffcd05 solid;
width: 400px;
height: 200px;
overflow: auto;
}
#menu {
display : inline-block;
}
.button {
margin-left : 5px;
display : block;
border : 1px solid black;
color : black;
background : none;
font-size : 1.2em;
margin-top : 7px;
}
#emo {
position: absolute;
margin-top : 40px;
margin-left : 25px;
}
#emoji_navigator{
border-bottom: 1px #ffcd05 solid;
}
#emoji_tooltip{
display: none;
border: 1px #ffcd05 solid
}
.navigator{
border: 1px #FFFFFF solid;
cursor: pointer;
margin: 1px;
width: 32px;
height: 32px
}
.navigator:hover{
border: 1px #CECEF6 solid;
cursor: pointer;
margin: 1px;
width: 32px;
height: 32px
}
.emoji_list{
border: 1px #FFFFFF solid;
cursor: pointer;
margin: 1px;
width: 120px;
height: 120px;
}
.emoji_list:hover{
border: 1px #CECEF6 solid;
cursor: pointer;
margin: 1px;
width: 120px;
height: 120px;
}
/* Scroll Bar */
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Chatting_Web</title>
<script type="text/javascript" src="/customEmoji.js"></script>
<link href="/customEmoji.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script> -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.0.0.js"></script>
</head>
<body style = 'background-color : #2b2b2b'>
<br/>
<div class = "Box" >
<div class = "chat">
<div id="msg"></div>
<div class = "send">
<div class = "input">
<div id="input_Box" contenteditable="true"></div>
</div>
<div class = "emoji">
<img class="emoji_pickup" id="emoji_pickup_before" src="img/1f642.png" style="width: 40; ">
<img class="emoji_pickup" id="emoji_pickup_after" src="img/1f600.png">
</div>
<div id="emoji_popup" style ="z-index : 1">
<div id="emoji_navigator">
<a href="#people" id="campus"><img style="margin-left: 6px" class="navigator" id="nav_people" src="img/campus2.png" /></a>
</div>
<!-- emoji popup div start -->
<div id="people"><h5>대학일기</h5></div>
<img class="emoji_list" id="campus1" src="img/campus1.png" />
<img class="emoji_list" id="campus2" src="img/campus2.png" />
<img class="emoji_list" id="campus3" src="img/campus3.png" />
<img class="emoji_list" id="campus4" src="img/campus4.png" />
<img class="emoji_list" id="campus5" src="img/campus5.png" />
<img class="emoji_list" id="campus6" src="img/campus6.png" />
<img class="emoji_list" id="campus7" src="img/campus7.png" />
<img class="emoji_list" id="campus8" src="img/campus8.png" />
<img class="emoji_list" id="campus9" src="img/campus9.png" />
<img class="emoji_list" id="campus10" src="img/campus10.png" /> </div>
<!-- emoji popup div end -->
<div id="custom_emoji" style ="z-index : 2">
<div id = "menu">
<div id = "menu_bnt">
<button class = "button">텍스트 삽입</button>
<button class = "button">보내기</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)