Sockett.IOとnodeJsでインスタントメッセージのプッシュを実現します.
12892 ワード
早くからWebSocketでインスタントメッセージのプッシュ機能を完成したいです.以前はWebSocket+C〓で実現しようとしましたが、結局人は年を取って馬鹿になりました.一日も治らなかったです.今はいくつかの資料を参考にして、やっと一つのSocket.IOとnodeJsを結合したDemoが完成しました.Sockete.IOを使うと、開発者がブラウザの違いを気にする必要がないという大きなメリットがあります.ChromeはWebSocketを使いますが、使うIEならポーリングします.nodeJsの環境構築などの知識はここでは取り上げません.とりあえず入門の文章を提供します. Node入門 , Sockett.IOの公式サイト
もう一つ勧めます.いい外国語です.Commet and Sockett.io deployment.
バックグラウンドコードserver.js
var fs = require('fs'),
http = require('http'),
sio = require('socket.io');
var server = http.createServer(function(req, res) {
res.writeHead(200, { 'Content-type': 'text/html' });
res.end(fs.readFileSync('./index.htm'));
});
server.listen(8888, function() {
console.log('Server listening at http://localhost:8888/');
});
// Attach the socket.io server
io = sio.listen(server);
// store messages
var messages = [];
// Define a message handler
io.sockets.on('connection', function(socket) {
socket.on('message', function(msg) {
console.log('Received: ', msg);
messages.push(msg);
socket.broadcast.emit('message', msg);
});
// send messages to new clients
messages.forEach(function(msg) {
socket.send(msg);
})
});
フロントコードindex.httm<html>
<head>
<style type="text/css">
#messages { padding: 0px; list-style-type: none;}
#messages li { padding: 2px 0px; border-bottom: 1px solid #ccc; }
</style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function() {
var socket = io.connect();
socket.on('connect', function() {
socket.on('message', function(message) {
$('#messages').append($('<li></li>').text(message));
});
socket.on('disconnect', function() {
$('#messages').append('<li>Disconnected</li>');
});
});
var el = $('#chatmsg');
$('#chatmsg').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
socket.send(el.val());
$('#messages').append($('<li></li>').text(el.val()));
el.val('');
}
});
});
</script>
</head>
<body>
<ul id="messages"></ul>
<hr>
<input type="text" id="chatmsg">
</body>
</html>
運転方法Sockete.IO公式サイトからの例では、ここの点を説明していませんでしたが、一日じゅう混乱していました.上の外国語を見てから分かりました.
このモモちゃんはチャットルームとは言えません.インスタントメッセージを送っただけです.これからは時間があります.もっと完璧にしましょう.