node.jsとsocket.io純jsによるインスタント通信インスタンスの共有
10247 ワード
この例ではnode.jsは本当にサーバの役割を果たしていません.ここではclientを直接実行することができますから.htmlファイルは、urlリクエストを入力する必要はありません.もちろん、urlリクエストページの内容を入力するには、静的ファイルをリクエストするコードを追加する必要があります.この例ではnode.jsの最も重要な役割は、サービス側をjsに移行することであり、クライアントとサービス側の言語の統一を実現し、ブラウザ上で2つのclient.を同時に実行することです.htmlクライアントページは、簡単な通信ができます.socket.ioこそ、インスタント通信を実現するためのメッセージの送受信です.
var server = http.createServer(callback);//httpサービスを開始
var io = require("socket.io").listen(server);//httpサーバを傍受するためのsocketio
次にクライアントコードclientに直接アクセスします.html
対応するクライアントjsファイル
次はメインイベントのサービス端だjs
ここでは皆さんがwin 7の環境でnodeをインストールしていると仮定します.js、簡単にデバッグすればnode-inspectorデバッグツールをインストールしたり、webStorm IDEを使ったりすることができます.具体的には、私の前のブログを参照してください.この3つのファイルにはもちろん、サービス側とクライアントのsocketが必要です.ioファイル、node.jsはサードパーティ製のパッケージをダウンロードする方法です.クライアントのsocket.ioファイルはネット上で見つけることができます.
次に、上記のコード実装の機能と使い方を簡単に紹介します.ページを開くとまずログインします.例が簡単なので、個別のログインページはなく、テキストボックスにユーザー名を直接入力します.注意(ここのユーザー名はuser 1またはuser 2のみで、読者はserver.jsのusersで自分の必要なユーザー名を追加することができますが、ここは実は固定されています)、車に戻って、ログインして、送信する必要がある情報を入力して、受信者のユーザー名をクリックします.そうしないと、受信者は空になります.ページを閉じるとき、私たちはページを閉じるイベントを傍受します.サービス側にdisconnectイベントを送信し、現在のユーザー名の接続を削除します.このプロセスによると、コードは実は簡単で、詳しくはわかりません.
もともとソースコードを貼るのが好きではありませんが、実際の効果を考えて、貼って、参考にして、みんなを助けることができることを望んで、大牛にも教えてもらいます.
var server = http.createServer(callback);//httpサービスを開始
var io = require("socket.io").listen(server);//httpサーバを傍受するためのsocketio
次にクライアントコードclientに直接アクセスします.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>socketIO - Simple chat</title>
<script src="./socketio.js"></script>
<style>
* { font-family:tahoma; font-size:12px; padding:0px; margin:0px; }
p { line-height:18px; }
div { }
.textInput{width:500px;margin: 0 auto;margin-top: 50px;}
#content { padding:5px; background:#ddd; border-radius:5px; overflow-y: scroll;
border:1px solid #CCC; height: 160px;width: 400px;float: left;}
#input { border-radius:2px; border:1px solid #ccc;
margin-top:10px; padding:5px; width:400px; }
#status { width:88px; display:block; float:left; margin-top:15px; }
.onlineList {
width: 200px;
height: 160px;
background-color: #ccc;
border: 1px solid #DDD;
margin-top: 50px;
margin-left: 420px;
}
li {
display: inline;border: 1px solid red;
}
.ul {
margin-left:auto; margin-right:auto;
width: 600px;
}
</style>
</head>
<script type="text/javascript">
//window.onbeforeunload = disConnect;
</script>
<body>
<div class="ul">
<div id="content"></div>
<div class="onlineList">
：
<div id="list">
</div>
</div>
</div>
<div class="textInput">
<span id="status">connecting</span>
<input type="text" id="input" value=" "/>
</div>
<script src="./jquery.js"></script>
<script src="./client.js"></script>
</body>
</html>対応するクライアントjsファイル
"use strict";
// for better performance - to avoid searching in DOM
var content = $('#content');
var input = $('#input');
var statusObj = $('#status');
var userList = $("#list");
// my color assigned by the server
var myColor = false;
// my name sent to the server
var myName = false;
var connection = null;
var currentToUser = null;
connect();
window.onbeforeunload = beforeDisConnect;//
window.onunload = disConnect;//
/**
* Send mesage when user presses Enter key
*/
input.keydown(function (e) {
if (e.keyCode === 13) {
var msg = $(this).val();
if (!msg) {
return;
}
if (!myName) {
myName = msg;//
statusObj.text(myName);
input.val("");
if (connection) {
connection.json.send({ logicId: "login", username: myName });
}
return;
}
var time = new Date();
var tmpTime = time.getFullYear() + "-" + ((time.getMonth() < 9 ? "0" : "") + (time.getMonth() + 1)) + "-" + ((time.getDate() < 10 ? "0" : "") + time.getDate()) + " "
+ ((time.getHours() < 10 ? "0" : "") + time.getHours()) + ":" + ((time.getMinutes() < 10 ? "0" : "") + time.getMinutes()) + ":" + ((time.getSeconds() < 10 ? "0" : "") + time.getSeconds());
// send the message as an ordinary text
msg = { "@class": "test.EntityIn", logicId: "chat", username: myName, msg: input.val(),
to:currentToUser,time:tmpTime};
//alert(typeof(object));
connection.json.send(msg);
$(this).val('');
// disable the input field to make the user wait until server
// sends back response
}
});
/**
* Add message to the chat window
*/
function addMessage(author, message, dt) {
content.prepend('<p><span>' + author + '</span> @ '+dt+ ': ' + message + '</p>');
}
function connect() {
// open connection
connection = io.connect('http://127.0.0.1:1337', { 'reconnect': false });
connection.on('connect', function (data) {
// first we want users to enter their names
input.removeAttr('disabled');
statusObj.text(' :');
connection.send(1);
});
connection.on("error", function (error) {
// just in there were some problems with conenction...
content.html($('<p>', {
text: 'Sorry, but there\'s some problem with your '
+ 'connection or the server is down.'
}));
});
// most important part - incoming messages
connection.on("message", function (message) {
var logicId = message.logicId;
if (logicId == 'conn_success') {//
var users = message.users;
for (var i = 0; i < users.length; i++) {
userList.append('<a href="#" onclick="chatToSb(this.innerHTML)">'+users[i]+'</a></br>');
}
} else if (logicId == "chat") {
addMessage(message.from,message.msg,message.time);
}else if(logicId == "history"){
var historyMsgs = message.historyMsgs;
for(var i = 0; i < historyMsgs.length; i++){
addMessage(historyMsgs[i].from,historyMsgs[i].msg,historyMsgs[i].time);
}
}
});
}
function chatToSb(username) {
currentToUser = username;
}
function disConnect(){
connection.disconnect();
//alert(" ");
}
function beforeDisConnect() {
return " ";
}
次はメインイベントのサービス端だjs
"use strict";
var http = require('http');
/**
* Global variables
*/
var history = [];
// list of currently connected clients (users)
var users = ["user1","user2"];
var clients = [];
/**
* HTTP server
*/
var server = http.createServer(function (request, response) {
// Not important for us. We're writing socket.io server, not HTTP server
});
server.listen(1337);
/**
* socketio server
*/
var io = require("socket.io").listen(server);
//io socket
io.on('connection', function (connection) {
console.log((new Date()) + ' Connection from origin ' + connection.id + '.');
var json = { logicId:"conn_success",users: users };
connection.json.send(json);
var userName = false;
console.log((new Date()) + ' Connection accepted.');
connection.on('message', function (message) {
console.log(message);
if (message.logicId == "login") {
clients[message.username] = connection; //
connection.username = message.username;
}else if(message.logicId == "chat") {//
//1、
var toUser = message.to;//
var from = message.username;//
if(history[toUser]&&history[toUser][from]){
var historyMsgs = [];
for (var i = 0; i < history[toUser][from].length; i++) {
historyMsgs.push(history[toUser][from][i]);
};
connection.json.send({logicId:"history",historyMsgs:historyMsgs});
}
//2、 ， ， , ，
var objConnect = clients[toUser];
var chatJson = {logicId:"chat", from: from, time: message.time, msg: message.msg };
connection.json.send(chatJson);
if (objConnect) {
objConnect.json.send(chatJson);
} else {//
if (!history[from]||!history[from][toUser]) {
if (!history[from]) {
history[from] = [];
}
history[from][toUser] = [];
}
history[from][toUser].push(chatJson);
}
}
});
// user disconnected
connection.on('disconnect', function (socket) {
console.log(" :" + socket);
delete clients[connection.username];//
});
});ここでは皆さんがwin 7の環境でnodeをインストールしていると仮定します.js、簡単にデバッグすればnode-inspectorデバッグツールをインストールしたり、webStorm IDEを使ったりすることができます.具体的には、私の前のブログを参照してください.この3つのファイルにはもちろん、サービス側とクライアントのsocketが必要です.ioファイル、node.jsはサードパーティ製のパッケージをダウンロードする方法です.クライアントのsocket.ioファイルはネット上で見つけることができます.
次に、上記のコード実装の機能と使い方を簡単に紹介します.ページを開くとまずログインします.例が簡単なので、個別のログインページはなく、テキストボックスにユーザー名を直接入力します.注意(ここのユーザー名はuser 1またはuser 2のみで、読者はserver.jsのusersで自分の必要なユーザー名を追加することができますが、ここは実は固定されています)、車に戻って、ログインして、送信する必要がある情報を入力して、受信者のユーザー名をクリックします.そうしないと、受信者は空になります.ページを閉じるとき、私たちはページを閉じるイベントを傍受します.サービス側にdisconnectイベントを送信し、現在のユーザー名の接続を削除します.このプロセスによると、コードは実は簡単で、詳しくはわかりません.
もともとソースコードを貼るのが好きではありませんが、実際の効果を考えて、貼って、参考にして、みんなを助けることができることを望んで、大牛にも教えてもらいます.