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

socket.io 实现网页聊天

2014-11-26 00:12 387 查看

1.服务端

首先看看依赖文件：

{
"name":"ws-echo"
,"version":"0.0.1"
,"dependencies":{
"express":"2.5.1"
,"socket.io":"0.9.2"
}
}

然后是服务器代码：

var express = require('express');
var sio = require('socket.io');

var app = express.createServer();
app.use(express.bodyParser());
app.use(express.static('public'));
app.listen(3000);

var io = sio.listen(app);

io.sockets.on('connection',function(socket){
console.log('someone connected');
socket.on('join',function(name){
console.log("%s  join",name);
socket.nickname = name;
socket.broadcast.emit('announcement',name + '  joined the chat.');
});
socket.on('text',function(msg){
socket.broadcast.emit('text',socket.nickname,'  '+msg);
});
});

sio.listen (app)是将socket.io绑定到APP的，这样就可以为所欲为了。最爽的事情是，通信可以通过相应字符串标示的类型进行处理，如‘join’、‘text’.

2.客户端

客户端的文件放在public 文件夹下，工程文件大致如下图所示

接下来看看客户端的3个文件:

index.html

<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<script src="/socket.io/socket.io.js"></script>
<script src="/chat.js"></script>
<link href="/chat.css" rel ="stylesheet"/>
</head>
<body>
<div id ="chat">
<ul id="messages"></ul>
<form id="form">
<input type = "text" id="input"/>
<button>Send</button>
</form>
</div>
</body>
</html>

通过src可以将js文件放在服务器端，支出相对路劲。但是这个socket.io/socket.io.js让我有点疑惑，服务器并没有这个路径，但是没有这个src，客户端是无法正常工作的。<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是
<div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

chat.css

/*...*/
#chat { display: none}

chat.js

window.onload = function(){
var socket = io.connect();
socket.on('connect',function(){
socket.emit('join',prompt('what is your nickname?'));
document.getElementById('chat').style.display = 'block';
});

socket.on('announcement',function(msg){
var li = document.createElement('li');
li.className = 'announcement';
li.innerHTML = msg;
document.getElementById('messages').appendChild(li);
});

function addMessage(from,text){
var li = document.createElement('li');
li.className = 'message';
li.innerHTML = '<b>' + from +'</b>' + text;
document.getElementById('messages').appendChild(li);
}
var input = document.getElementById('input');
document.getElementById('form').onsubmit = function(){
addMessage('me  ',input.value);
socket.emit('text',input.value);
input.value = '';
input.focus();
return false;
};
socket.on('text',addMessage);

}

io.connect 应该是建立一个socket.io的链接，这个通信过程使用的应该是websocket。prompt的作用是弹出一个提示框，输入nickname，包含一个ok按钮和一个cancel按钮，如果点击ok按钮，会将输入作为返回值。

参考：《了不起的Node.js》

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： nodejs

相关文章推荐

新的分享

章节导航