1024

微他博 2022-10-16 發(fā)布于廣東

展開(kāi)全文

使用node.js和實(shí)現(xiàn)多人聊天室

2015年01月24日 03:24:54 遠(yuǎn)古大猛犸閱讀數(shù)：2775

轉(zhuǎn)自：

http://www.cnblogs.com/flyoung2008/archive/2012/07/19/2600132.html

http://blog./nodejs-socketio-chat/

一,、基本功能

1,、用戶隨意輸入一個(gè)昵稱即可登錄
2,、登錄成功后
1) 對(duì)正在登錄用戶來(lái)說(shuō),，羅列所有在線用戶列表，羅列最近的歷史聊天記錄
2) 對(duì)已登錄的用戶來(lái)說(shuō),，通知有新用戶進(jìn)入房間,，更新在線用戶列表
3、退出登錄
1)支持直接退出
2) 當(dāng)有用戶退出,，其他所有在線用戶會(huì)收到信息,，通知又用戶退出房間,，同時(shí)更新在線用戶列表
4、聊天
1) 聊天就是廣播,，把信息廣播給所有連接在線的用戶
5,、一些出錯(cuò)處理
1) 暫時(shí)簡(jiǎn)單處理了系統(tǒng)邏輯錯(cuò)誤、網(wǎng)絡(luò)出錯(cuò)等特殊情況的出錯(cuò)提示

問(wèn)題：功能不完善,，有bug(退出后,，新用戶重新登錄，還是原來(lái)的用戶) ,。抽空完善吧

二,、技術(shù)介紹

(官網(wǎng)：http:///)是一個(gè)跨平臺(tái)，多種連接方式自動(dòng)切換,，做即時(shí)通訊方面的開(kāi)發(fā)很方便,，而且能和expressjs提供的傳統(tǒng)請(qǐng)求方式很好的結(jié)合，即可以在同一個(gè)域名,，同一個(gè)端口提供兩種連接方式：request/response, websocket(flashsocket,ajax…),。

這篇文章對(duì)的使用做了詳細(xì)介紹：http://www.cnblogs.com/dxy1982/archive/2012/01/30/2328020.html

《用node.js和Websocket做個(gè)多人聊天室吧》http://www./HTML5features/WebSocket/20111206_3096.html

三、注意事項(xiàng)

（1）客戶端這樣引用.js：

<script src="http://.js"></script>

可能會(huì)加載失?。ㄎ以谶@里耗了不少時(shí)間）

可以改為：

<script src="http://ip:port//.js"></script>

(對(duì)應(yīng)服務(wù)器的ip地址和端口號(hào),，比如說(shuō)localhost和80端口)

（2）實(shí)現(xiàn)廣播的時(shí)候，參考官網(wǎng)的寫(xiě)法,，竟然不起作用,，如：

var io = require('').listen(80);

io.sockets.on('connection', function (socket) {
  socket.broadcast.emit('user connected');
  socket.broadcast.json.send({ a: 'message' });
});

后來(lái)看了這個(gè)：http:///questions/7352164/update-all-clients-using-socket-io

改為以下才起作用：

io.sockets.emit('users_count', clients);

四、效果圖

五,、源碼下載

　　Nodejs多人聊天室

ps:

1,、在命令行運(yùn)行

node main.js

然后在瀏覽器中打開(kāi)index.html,如果瀏覽器（ff、Chrome）不支持,，請(qǐng)升級(jí)到支持WebSocket的版本.

2,、推薦node.js的IDE WebStorm

=============================================================================================================================

前言

網(wǎng)絡(luò)聊天室在web1.0的時(shí)代就出現(xiàn)了，但當(dāng)時(shí)技術(shù)支持比較有限,，大都是通過(guò)瀏覽器插件BHO,，JavaApplet，F(xiàn)lash實(shí)現(xiàn)的,。如今HTML5技術(shù)風(fēng)起云涌,，通過(guò)websocket實(shí)現(xiàn)的網(wǎng)絡(luò)聊天室，被定義為websocket的第一個(gè)實(shí)驗(yàn),，就像Hello World一樣的簡(jiǎn)單。

今天我也動(dòng)手完成了這個(gè)實(shí)驗(yàn),，感覺(jué)真的很爽,！

介紹
服務(wù)器端和客戶端通信設(shè)計(jì)
服務(wù)器端實(shí)現(xiàn)
客戶端實(shí)現(xiàn)
完整案例代碼

1. 介紹

一個(gè)是基于Nodejs架構(gòu)體系的，支持websocket的協(xié)議用于時(shí)時(shí)通信的一個(gè)軟件包。給跨瀏覽器構(gòu)建實(shí)時(shí)應(yīng)用提供了完整的封裝,，完全由javascript實(shí)現(xiàn),。

基于Nodejs實(shí)現(xiàn)webscoket其他的框架，請(qǐng)參考文章：Nodejs實(shí)現(xiàn)websocket的4種方式

2. 服務(wù)器端和客戶端通信設(shè)計(jì)

上圖中client1 和 server 描述通信過(guò)程,，client2描述對(duì)其他的客戶端,，通過(guò)廣播進(jìn)行消息通信。

client1向server發(fā)起連接請(qǐng)求
server接受client的連接
client1輸入登陸用戶名
server返回歡迎語(yǔ)
server通過(guò)廣播告訴其他在線的用戶,，client1已登陸
client1發(fā)送聊天信息
server返回聊天信息(可省略)
server通過(guò)廣播告訴其他在線的用戶,，client1的聊天消息
client1關(guān)閉連接，退出登陸
server通過(guò)廣播告訴其他在線的用戶,，client1已退出

我們看一下測(cè)試截圖：

左邊: aaa 登陸
右邊: bbb 登陸
左邊: aaa 收到 bbb登陸歡迎消息
aaa 和 bbb 實(shí)現(xiàn)對(duì)話
右邊: bbb 刷新瀏覽自動(dòng)退出
左邊: aaa 收到 bbb的退出消息
右邊: CCC 登陸
左邊: aaa 收到 CCC 登陸歡迎消息
aaa 和 CCC 實(shí)現(xiàn)對(duì)話

3. 服務(wù)器端實(shí)現(xiàn)

我們這里使用和express3的混合模式,，讓HTTP請(qǐng)求和WebSocket請(qǐng)求都使用3000端口。

服務(wù)器端實(shí)現(xiàn),，只有一個(gè)核心文件app.js,。

//引入程序包
var express = require('express')
, path = require('path')
, app = express()
, server = require('http').createServer(app)
, io = require('').listen(server);
//設(shè)置日志級(jí)別
io.set('log level', 1);
//WebSocket連接監(jiān)聽(tīng)
io.on('connection', function (socket) {
socket.emit('open');//通知客戶端已連接
// 打印握手信息
// console.log(socket.handshake);
// 構(gòu)造客戶端對(duì)象
var client = {
socket:socket,
name:false,
color:getColor()
}
// 對(duì)message事件的監(jiān)聽(tīng)
socket.on('message', function(msg){
var obj = {time:getTime(),color:client.color};
// 判斷是不是第一次連接，以第一條消息作為用戶名
if(!client.name){
client.name = msg;
obj['text']=client.name;
obj['author']='System';
obj['type']='welcome';
console.log(client.name + ' login');
//返回歡迎語(yǔ)
socket.emit('system',obj);
//廣播新用戶已登陸
socket.broadcast.emit('system',obj);
}else{
//如果不是第一次的連接,，正常的聊天消息
obj['text']=msg;
obj['author']=client.name;
obj['type']='message';
console.log(client.name + ' say: ' + msg);
// 返回消息（可以省略）
socket.emit('message',obj);
// 廣播向其他用戶發(fā)消息
socket.broadcast.emit('message',obj);
}
});
//監(jiān)聽(tīng)出退事件
socket.on('disconnect', function () {
var obj = {
time:getTime(),
color:client.color,
author:'System',
text:client.name,
type:'disconnect'
};
// 廣播用戶已退出
socket.broadcast.emit('system',obj);
console.log(client.name + 'Disconnect');
});
});
//express基本配置
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
// 指定webscoket的客戶端的html文件
app.get('/', function(req, res){
res.sendfile('views/chat.html');
});
server.listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
var getTime=function(){
var date = new Date();
return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
}
var getColor=function(){
var colors = ['aliceblue','antiquewhite','aqua','aquamarine','pink','red','green',
'orange','blue','blueviolet','brown','burlywood','cadetblue'];
return colors[Math.round(Math.random() * 10000 % colors.length)];
}

4. 客戶端實(shí)現(xiàn)

這里我們需要定義幾個(gè)文件：chat.html, chat.js, jquery.min.js, main.css

1). views/chat.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Socket.io - Simple chat</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="javascripts/jquery.min.js"></script>
<script src="http://.js"></script>
<script src="javascripts/chat.js"></script>
</head>
<body>
<h1>Socket.io - Simple chat room</h1>
<div>
<span id="status">Connecting...</span>
<input type="text" id="input"/>
</div>
<div id="content"></div>
</body>
</html>

2). public/javascript/chat.js

$(function () {
var content = $('#content');
var status = $('#status');
var input = $('#input');
var myName = false;
//建立websocket連接
socket = io.connect('http://localhost:3000');
//收到server的連接確認(rèn)
socket.on('open',function(){
status.text('Choose a name:');
});
//監(jiān)聽(tīng)system事件,，判斷welcome或者disconnect，打印系統(tǒng)消息信息
socket.on('system',function(json){
var p = '';
if (json.type === 'welcome'){
if(myName==json.text) status.text(myName + ': ').css('color', json.color);
p = '<p style="background:'+json.color+'">system @ '+ json.time+ ' : Welcome ' + json.text +'</p>';
}else if(json.type == 'disconnect'){
p = '<p style="background:'+json.color+'">system @ '+ json.time+ ' : Bye ' + json.text +'</p>';
}
content.prepend(p);
});
//監(jiān)聽(tīng)message事件,，打印消息信息
socket.on('message',function(json){
var p = '<p><span style="color:'+json.color+';">' + json.author+'</span> @ '+ json.time+ ' : '+json.text+'</p>';
content.prepend(p);
});
//通過(guò)“回車(chē)”提交聊天信息
input.keydown(function(e) {
if (e.keyCode === 13) {
var msg = $(this).val();
if (!msg) return;
socket.send(msg);
$(this).val('');
if (myName === false) {
myName = msg;
}
}
});
});

3). public/javascript/jquery.min.js
從jquery官方下載: http:///

4). public/css/main.css

* {padding:0px; margin:0px;}
body{font-family:tahoma; font-size:12px;margin:10px;}
p {line-height:18px;padding:2px;}
div {width:500px;}
#content {
padding:5px;
background:#ddd;
border-radius:5px;
border:1px solid #CCC;
margin-top:10px;
}
#input {
border-radius:2px;
border:1px solid #ccc;
margin-top:10px;
padding:5px;
width:380px;
}
#status {
width:100px;
display:block;
float:left;
margin-top:15px;
}

5. 完整案例代碼

項(xiàng)目已經(jīng)上傳到github: https://github.com/bsspirit/chat-websocket

下載,，安裝，啟動(dòng)服務(wù)器

git clone https://github.com/bsspirit/chat-websocket.git
npm install
node app.js

打開(kāi)瀏覽器
可以多打開(kāi)幾個(gè)窗口,，模擬不同用戶有的對(duì)話,。

http://localhost:3000

做完實(shí)驗(yàn)，感覺(jué)棒極了,。技術(shù)創(chuàng)新的革命?。?/p>

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買(mǎi)等信息,，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：微他博 > 《web前端》

舉報(bào)/認(rèn)領(lǐng)