您的位置：首页 > Web前端 > Node.js

nodejs学习笔记(3)-socket.io打造简易聊天室

2014-11-19 13:04 239 查看
By Forest
 04 19 2014 Updated:04 19 2014

Contents
1. 建立express工程和socket.io
2. 先运行下socket.io官网的代码
3. socket.io相关
4. 聊天室
4.1. 服务器app.js
4.2. 客户端chat.js
4.3. 客户端显示index.html
4.4. 效果

5. 问题
http://blog.yidongzhifu.net/2014/04/19/nodejs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0(3)-socket.io%E6%89%93%E9%80%A0%E7%AE%80%E6%98%93%E8%81%8A%E5%A4%A9%E5%AE%A4/
在一大侠的blog中看到他用socket.io做了一个网络聊天室，就照着大侠的方法自己也做了一个．Socket.io旨在在不同版本，不同终端的浏览器之间实现实时通信,为了实现在不同浏览器间实时通信，socket.io会从WebSocket,AjAX long polling,Forever iframe中选择一种最有的通信方法．支持IE5.5+,Safari 3+.Chrome 4+,firefox 3+,Opera 10+等桌面浏览器和Iphone Safari,iPad Safari,Android
Webkit,WebOs webkit等手机浏览器．

建立express工程和socket.io

1
2
3
4

mkdir socketio
cd socketio
express -e
npm install socket.io

先运行下socket.io官网的代码

修改app.js,增加如下代码

1
2
3
45
6
7
8
9
10
11
12
13

app.get('/', function(req,res){
res.sendfile(__dirname+'/client/index.html');
});
var server=http.createServer(app);
server.listen(80);
var io = require('socket.io').listen(server);

io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});

建立一个client的文件夹，并在里面创建一个index.html的文件

1
2
3
45
6
7
8

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>

在这个例子中只要客户端连接上，服务器端就会发送一个news事件的消息－＞客户端接收到news事件后—>打印消息并发送一个my other event事件的消息－＞服务器端接收到这个my other event事件后就将其打印出来



socket.io相关

1.socket.io 有connect，message，disconnect三个常用的基本事件，用户可以自定义自己的事件，我这个学习demo中就有isopen,system自定义的事件

2.socket.send方法默认是message事件发送消息

3.socket.emit(action, data, function)为发送事件的方法,可以发送一个空事件过去,socket.emit(‘isopen’);

4.socket.on(action,function)为接受事件的方法,也可以接受一个空事件,socket.on(‘isopen’,function(){});

聊天室

服务器app.js

1
2
3
45
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

app.get('/socket',function(req,res){
res.sendfile(__dirname+'/client/index.html')
});
var server=require('http').createServer(app);
server.listen(80);
var io=require('socket.io').listen(server);

io.sockets.on('connection',function(socket){
var client={
name:false
}

// 发送一个打开socket的消息信号
socket.emit('isopen');
socket.on('message',function(data){
if(!client.name){
var sysmsgobj = {
time:getTime(),
name:data,
type:'connect'
};
client.name=data;
socket.emit('system',sysmsgobj);
socket.broadcast.emit('system',sysmsgobj);
console.log('login'+sysmsgobj.name);
}else{
var msgobj = {time:getTime()};
msgobj['name']=client.name;
msgobj['content']=data;
msgobj['type']='message';
socket.emit('message',msgobj);
socket.broadcast.emit('message',msgobj);
console.log('new message',msgobj);
}
});
socket.on('disconnect',function(){
var sysmsgobj = {
time:getTime(),
name:client.name,
type:'disconnect'
};
socket.emit('system',sysmsgobj);
socket.broadcast.emit('system',sysmsgobj);
console.log(sysmsgobj.name+'is logout');
});
});
var getTime=function(){
var dt=new Date();
return dt.getHours()+":"+dt.getMinutes()+":"+dt.getSeconds();
}

客户端chat.js

1
2
3
45
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

$(function () {
socket = io.connect('http://localhost');
var msgbox=$('#msgbox');
var input=$('#input');
var name=$('#name');
var issetname = false;
socket.on('isopen',function(){
name.text('please enter a name');
});

//接受系统消息
socket.on('system',function(systemdata){
if(systemdata.type == 'connect'){
var p = '<p  style="color:#445566;line-height: 90%;margin:2px 0px 0px 0px">'+systemdata.time+'-'+systemdata.name+' join us'+'</p>';
if(issetname==systemdata.name){
name.text(issetname);
}
}else if(systemdata.type == 'disconnect'){
var p = '<p  style="color:#445566;line-height: 90%;margin:2px 0px 0px 0px">'+systemdata.time+'-'+systemdata.name+' left'+'</p>';
}
msgbox.prepend(p);
});
socket.on('message', function (msgobj) {
console.log('receive:'+msgobj);
var p = '<p  style="color:#445566;line-height: 90%;margin:2px 0px 0px 0px">'+msgobj.time+'-'+msgobj.name+':'+msgobj.content+'</p>';
msgbox.prepend(p);
});
//接受系统消息
socket.on('system',function(systemdata){
if(systemdata.type == 'connect'){
var p = '<p  style="color:#445566;line-height: 90%;margin:2px 0px 0px 0px">'+systemdata.time+'-'+systemdata.name+' join us'+'</p>';
if(issetname==systemdata.name){
name.text(issetname);
}
}else if(systemdata.type == 'disconnect'){
var p = '<p  style="color:#445566;line-height: 90%;margin:2px 0px 0px 0px">'+systemdata.time+'-'+systemdata.name+' left'+'</p>';
}
msgbox.prepend(p);
});
socket.on('message', function (msgobj) {
console.log('receive:'+msgobj);
var p = '<p  style="color:#445566;line-height: 90%;margin:2px 0px 0px 0px">'+msgobj.time+'-'+msgobj.name+':'+msgobj.content+'</p>';
msgbox.prepend(p);
});

//通过“回车”提交聊天信息
input.keydown(function(e) {
if (e.keyCode === 13) {
var msg = $(this).val();
socket.send(msg);
$(this).val('');
console.log(msg);
if(issetname === false){
issetname=msg;
}
}
});
});

客户端显示index.html

1
2
3
45
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
<title>socket.io</title>
<link rel='stylesheet' href='/stylesheets/style.css' />

<script src="javascripts/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="javascripts/chat.js"></script>
</head>
<body>
<h1>socket demo</h1>
<p>socket demo</p>
<span id="name"></span>
<input type="text" id="input" />
<div id="msgbox"></div>
</body></html>

效果



问题

1.其中出现error raised: Error: listen EADDRINUSE，后来发现是端口的问题,开了多个node出现的
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航