-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (121 loc) · 3.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<link rel="stylesheet" href="/index.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
a{
color: aliceblue;
}
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input type="file" id="uploadfile" multiple='multiple'>
<a href="#">私发</a>
<input id="m" autocomplete="off" /><button>发送</button>
</form>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var userObj = null;
var name = prompt("请输入你的昵称：");
//连接本机服务器
var socket = io('localhost:3000')
//发送昵称给后端，并更改网页title
socket.emit("join", name)
document.title = name + "的群聊"
socket.on("join", function (msg) {
socket.name = msg.name;
addLine(msg.name + '加入了群聊');
displayOnlineUser(msg);
// console.log(user);
// for (var x in user.usocket) {
// console.log(user.usocket[x]);
// }
})
//接收到服务器发来的message事件
socket.on("message", function(msg) {
addLine(msg)
})
socket.on('disconnect', function(msg){
addLine(msg.name + '退出了群聊');
displayOnlineUser(msg);
})
socket.on('base64 file', function(msg){
addLine(msg)
})
//私聊
socket.on('private', function(msg){
privateAddLine(msg);
console.log(msg.msg + '私聊成功');
})
$('a').on('click', function(){
var msg = $("#m").val();//获取用户输入信息
var toName = prompt('请输入私聊人的用户名')
var privateData = {
myName: socket.name,
toName: toName,
msg: msg
};
socket.emit('sayTo', privateData)
})
//当发送按钮被点击时
$('form').submit(function () {
var msg = $("#m").val() //获取用户输入的信息
userObj = {
name: name,
msg: msg
}
socket.emit("message", userObj) //将消息发送给服务器
$("#m").val("") //置空消息框
return false //阻止form提交
})
$('#uploadfile').bind('change', function(e){
var data = e.originalEvent.target.files[0];
var data_URL = readThenSendFile(data);
});
function addLine(msg) {
if(msg.msg){
$('#messages').append($('<li>').text(msg.name +': '+ msg.msg));
}else if(msg.file && msg.type){
$('#messages').append($('<li>').text(msg.username+':'+'图片展示').append($('<iframe>').attr('src', msg.file)));
}else if(msg.file && !msg.type){
console.log(msg.type);
console.log(msg);
$('#messages').append($('<li>').text(msg.username+':'+ msg.fileName + '文件上传中').append($('<iframe>').attr({src: msg.file, hidden:'hidden'})));
}else{
return $('#messages').append($('<li>').text(msg));
}
}
//私聊添加框
function privateAddLine(msg){
$('#messages').append($('li')).text(msg.myName +'的私信:'+msg.msg)
}
//显示在线用户
function displayOnlineUser(msg){
$('#messages').append($('<li>').text(msg.allUser.join()+'在线'));
}
function readThenSendFile(data){
var reader = new FileReader();
reader.onload = function(evt){
var rg = /.jpg$/;
var msg ={};
if(rg.test(data.name)){
console.log('123');
msg.type = rg.test(data.name);
}else{
msg.type = false;
}
msg.username = socket.name;
console.log(socket.name);
msg.file = evt.target.result;
msg.fileName = data.name;
socket.emit('base64 file', msg);
};
return reader.readAsDataURL(data);
}
</script>
</html>