SOcketを利用する.ioマルチチャットルームの実装(Nodejsベース)
socket.ioの概要
http://blog.csdn.net/newpidian/article/details/50850670
この特性は、ブラウザ側とサーバ側のTCP接続に基づく双方向チャネルを提供する.しかし、すべてのブラウザがwebsocket特性をサポートするわけではないため、ブラウザ間の差異を平らにするために、開発者に統一的なインタフェースを提供するためにsocketが導入された.ioモジュール.Websoketをサポートしていないブラウザでは、socket.ioは、AJAX long polling、JSONP Pollingなど、他の通信方式に格下げすることができる.モジュールは新しいpackageをインストールします.jsonファイル、ファイルに次の内容を書きます.
この文を実行すると、nodeはnpmからsocketをダウンロードします.ioとexpressモジュール.
-
サーバ側の実装
フォルダにindexを追加します.jsファイルは、次のようにファイルに書き込まれます.
サーバー・エンド・プログラムの実行
しゅつりょく
ブラウザでlocalhost:3000を開くと、
という結果になります.
なぜなら,コードにはルーティングのみが以下のように設定されているからである.
サーバ側は主にsocketioサービスを提供しており,ルーティングは設定されていない.
クライアントの実装
クライアントにはjson 3のディレクトリとファイルが作成される.min.jsはネットからダウンロードできます.client - - - client.js - - - index.html - - - json3.min.js - - - style.css
indexでhtml内
クライアントでjs中
style.css
秘密
実行結果
サーバー側はすでに実行しており、クライアントも実行して次の図を示します.
newとpidianの2人のユーザーを追加し、情報を送信して終了し、次の結果を得ました.
Html5 ， websocket， websocket ， websocket ， ， ， websocket。 ， websocket 。
http://blog.csdn.net/newpidian/article/details/50850670
この特性は、ブラウザ側とサーバ側のTCP接続に基づく双方向チャネルを提供する.しかし、すべてのブラウザがwebsocket特性をサポートするわけではないため、ブラウザ間の差異を平らにするために、開発者に統一的なインタフェースを提供するためにsocketが導入された.ioモジュール.Websoketをサポートしていないブラウザでは、socket.ioは、AJAX long polling、JSONP Pollingなど、他の通信方式に格下げすることができる.モジュールは新しいpackageをインストールします.jsonファイル、ファイルに次の内容を書きます.
{
"name": "socketiochatroom",
"version": "0.0.1",
"dependencies": {
"socket.io": "*",
"express":"*"
}
}npm install この文を実行すると、nodeはnpmからsocketをダウンロードします.ioとexpressモジュール.
-
サーバ側の実装
フォルダにindexを追加します.jsファイルは、次のようにファイルに書き込まれます.
/**
* Created by bamboo on 2016/3/31.
*/
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function (req, res) {
"use strict";
res.end("socket server"
)
});
/* */
var onLineUsers = {};
/* */
var onLineCounts = 0;
/*io ， socket socket */
io.on('connection', function (socket) {
console.log('a user connected');
/* */
socket.on('login', function (user) {
"use strict";
// socket.name user.userId;
socket.name = user.userId;
/* */
if (!onLineUsers.hasOwnProperty(user.userId)) {
//
onLineUsers[user.userId] = user.userName;
onLineCounts++;
}
/* ， login socket ， */
io.emit('login', {onLineUsers: onLineUsers, onLineCounts: onLineCounts, user: user});
console.log(user.userName, " ");//
});
/* */
socket.on('disconnect', function () {
"use strict";
if (onLineUsers.hasOwnProperty(socket.name)) {
var user = {userId: socket.name, userName: onLineUsers[socket.name]};
delete onLineUsers[socket.name];
onLineCounts--;
/* */
io.emit('logout', {onLineUsers: onLineUsers, onLineCounts: onLineCounts, user: user});
console.log(user.userName, " ");
}
})
/* ， io ， 。 ， ， ， ， emit ， id */
socket.on('message', function (obj) {
"use strict";
/* ， */
io.emit('message', obj);
console.log(obj.userName, " :", obj.content);
});
});
/* 3000*/
http.listen(3000, function () {
"use strict";
console.log('listening 3000');
});
サーバー・エンド・プログラムの実行
node index.jsしゅつりょく
listening 3000ブラウザでlocalhost:3000を開くと、
という結果になります.なぜなら,コードにはルーティングのみが以下のように設定されているからである.
app.get('/', function (req, res) {
"use strict";
res.end("socket server"
)
});サーバ側は主にsocketioサービスを提供しており,ルーティングは設定されていない.
クライアントの実装
クライアントにはjson 3のディレクトリとファイルが作成される.min.jsはネットからダウンロードできます.client - - - client.js - - - index.html - - - json3.min.js - - - style.css
indexでhtml内
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
<title>1301 title>
<link rel="stylesheet" type="text/css" href="./style.css"/>
<script src="http://realtime.plhwin.com:3000/socket.io/socket.io.js">script>
<script src="./json3.min.js">script>
head>
<body>
<div id="loginbox">
<div style="width: 260px;margin: 200px auto;">
<br/>
<br/>
<input type="text" style="width:180px;" placeholder=" " id="userName" name="userName"/>
<input type="button" style="width: 50px;" value=" " onclick="CHAT.userNameSubmit();"/>
div>
div>
<div id="chatbox" style="display: none;">
<div style="background: #3d3d3d;height: 28px;width: 100%;font-size: 12px">
<div style="line-height: 28px;color:#fff;">
<span style="text-align: left;margin-left: 10px;">1301 span>
<span style="float: right;margin-right: 10px"><span id="showUserName">span>|
<a href="javascript:;" onclick="CHAT.logout()" style="color: #fff;"> a>span>
div>
div>
<div id="doc">
<div id="chat">
<div id="message" class="message">
<div id="onLineCounts"
style="background: #EFEFF4; font-size: 12px;margin-top: 10px;margin-left: 10px;color: #666;">
div>
div>
<div class="input-box">
<div class="input">
<input type="text" maxlength="140" placeholder=" " id="content" name="content" >
div>
<div class="action">
<button type="button" id="mjr_send" onclick="CHAT.submit();"> button>
div>
div>
div>
div>
div>
<script type="text/javascript" src="./client.js">script>
body>
html>クライアントでjs中
/**
* Created by bamboo on 2016/3/31.
*/
/* */
(function () {
"use strict";
var d = document,
w = window,
dd = d.documentElement,
db = d.body,
dc = d.compatMode === "CSS1Compat",
dx = dc ? dd : db,
ec = encodeURIComponent,
p = parseInt;
w.CHAT = {
msgObj: d.getElementById("message"),
screenHeight: w.innerHeight ? w.innerHeight : dx.innerHeight,
userName: null,
userId: null,
socket: null,
/* */
scrollToBottom: function () {
w.scrollTo(0, this.msgObj.clientHeight);
},
/* ， */
logout: function () {
// this.socket.disconnect();
w.top.location.reload();
},
submit: function () {
var content = d.getElementById('content').value;
if (content != '') {
var obj = {
userId: this.userId,
userName: this.userName,
content: content
};
// ， 。
this.socket.emit('message', obj);
d.getElementById('content').value = '';
}
return false;
},
/** ID， */
genUid: function () {
return new Date().getTime() + "" + Math.floor(Math.random() * 889 + 100);
},
/*
， ， 。*/
updateSysMsg: function (o, action) {
var onLineUsers = o.onLineUsers;
var onLineCounts = o.onLineCounts;
var user = o.user;
//
var userHtml = '';
var separator = '';
for (var key in onLineUsers) {
if (onLineUsers.hasOwnProperty(key)) {
userHtml += separator + onLineUsers[key];
separator = '、';
}
}
//
d.getElementById('onLineCounts').innerHTML = ' ' + onLineCounts + " ： " + userHtml;
//
var html = '';
html += '';
html += user.userName;
html += (action === "login") ? " " : " ";
html += '';
var section = d.createElement('section');
section.className = 'system J-mjrlinkWrap J-cutMsg';
section.innerHTML = html;
this.msgObj.appendChild(section);
this.scrollToBottom();
},
/* ， loginbox ， chatbox */
userNameSubmit: function () {
var userName = d.getElementById('userName').value;
if (userName != '') {
d.getElementById('userName').value = '';
d.getElementById('loginbox').style.display = 'none';
d.getElementById('chatbox').style.display = 'block';
this.init(userName);// init
}
return false;
},
//
init: function (userName) {
// uid
this.userId = this.genUid();
this.userName = userName;
d.getElementById('showUserName').innerHTML = this.userName;//[newpidian]|[ ]
this.scrollToBottom();
// socketIO ,newpidian IP
this.socket = io.connect('192.168.3.155:3000');
//
this.socket.emit('login', {userId: this.userId, userName: this.userName});
// login， socket.emit('login ') ，
// io.emit('login', {onLineUsers: onLineUsers, onLineCounts: onLineCounts, user: user});
/* login ， */
this.socket.on('login', function (o) {
//
CHAT.updateSysMsg(o, 'login');
});
/* logout ， */
this.socket.on('logout', function (o) {
CHAT.updateSysMsg(o, 'logout');
});
//var obj = {
// userId: this.userId,
// userName: this.userName,
// content: content
//};
/* */
this.socket.on("message", function (obj) {
//
var isMe = (obj.userId === CHAT.userId);
var contentDiv = '' + obj.content + '';
var userNameDiv = '' + obj.userName + '';
var section = d.createElement('section');
if (isMe) {
section.className = 'user';
section.innerHTML = contentDiv + userNameDiv;
} else {
section.className = 'service';
section.innerHTML = userNameDiv + contentDiv;
}
CHAT.msgObj.appendChild(section);
CHAT.scrollToBottom();
});
}
}
/* (keyCode)
BackSpace 8 Esc 27 Right Arrow 39 -_ 189
Tab 9 Spacebar 32 Dw Arrow 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 \| 220
Alt 18 Left Arrow 37 =+ 187 ]} 221
Cape Lock 20 Up Arrow 38 ,< 188 '" 222
* */
// “ ”
d.getElementById('userName').onkeydown = function (e) {
console.log(e);
e = e || event;
if (e.keyCode === 13) {
CHAT.userNameSubmit();
}
};
// “ ”
d.getElementById('content').onkeydown = function (e) {
e = e || event;
if (e.keyCode === 13) {
CHAT.submit();
}
};
})();style.css
秘密
実行結果
サーバー側はすでに実行しており、クライアントも実行して次の図を示します.
newとpidianの2人のユーザーを追加し、情報を送信して終了し、次の結果を得ました.
