facebook_chat_with_javascript_on_node.js/basic.html at master · kjosk/facebook_chat_with_javascript_on_node.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html>
<head>
<title>XMPP with JavaScript</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
<script src='strophe.js'></script>

<script>
	var BOSH_SERVICE = 'http://nodebosh.herokuapp.com';
	var connection = null;

	function log(msg) {
		$('<div></div>').append(document.createTextNode(msg)).prependTo($('#log'));
	}

	function onConnect(status) {
		if (status == Strophe.Status.CONNECTING) {
			log('Strophe is connecting.');
		} else if (status == Strophe.Status.CONNFAIL) {
			log('Strophe failed to connect.');
			$('#connect').get(0).value = 'connect';
		} else if (status == Strophe.Status.DISCONNECTING) {
			log('Strophe is disconnecting.');
		} else if (status == Strophe.Status.DISCONNECTED) {
			log('Strophe is disconnected.');
			$('#connect').get(0).value = 'connect';
		} else if (status == Strophe.Status.CONNECTED) {
			log('Strophe is connected.');
			log('Send a message to ' + connection.jid +
			' to talk to me.');

			connection.addHandler(onMessage, null, 'message', null, null,  null);
			connection.send($pres().tree());
		}
	}

	function onMessage(msg) {
		var to = msg.getAttribute('to');
		var from = msg.getAttribute('from');
		var type = msg.getAttribute('type');
		var elems = msg.getElementsByTagName('body');

		if (type == "chat" && elems.length > 0) {
			var body = elems[0];

			log('I got a message from ' + from + ': ' +
			Strophe.getText(body));
		}

		// we must return true to keep the handler alive.
		// returning false would remove it after it finishes.
		return true;
	}

	function sendMessage() {
		var message = $('#message').get(0).value;
		var to = $('#to').get(0).value;

		if(message && to){
			var reply = $msg({
				to: to,
				type: 'chat'
			})
			.cnode(Strophe.xmlElement('body', message));
			connection.send(reply.tree());

			log('I sent ' + to + ': ' + message);
		}
	}

	$(document).ready( function () {
		connection = new Strophe.Connection(BOSH_SERVICE + '/http-bind/');

		// Uncomment the following lines to spy on the wire traffic.
		//connection.rawInput = function (data) { log('RECV: ' + data); };
		//connection.rawOutput = function (data) { log('SEND: ' + data); };

		// Uncomment the following line to see all the debug output.
		//Strophe.log = function (level, msg) { log('LOG: ' + msg); };


		$('#connect').bind('click', function () {
			var button = $('#connect').get(0);
			if (button.value == 'connect') {
				button.value = 'disconnect';
				var jid = $('#jid').get(0).value;
				connection.connect(jid,
					$('#pass').get(0).value,
					onConnect);
			} else {
				button.value = 'connect';
				connection.disconnect();
			}
		});

		$('#send').bind('click', function () {
			sendMessage();
		});
	});

</script>
</head>
<body>
	<h1>node-xmpp-bosh + strophe.js</h1>
	<div id='login' style='text-align: center'>
		<form name='cred'>
			<label for='jid'>
				JID:
			</label>
			<input type='text' id='jid'>
			<label for='pass'>
				Password:
			</label>
			<input type='password' id='pass'>
			<input type='button' id='connect' value='connect'>
		</form>
		<label for='to'>
			to:
		</label>
		<input type='text' id='to'>
		<label for='message'>
			message:
		</label>
		<input type='text' id='message'>
		<input type='button' id='send' value='send'>
	</div>
	<hr>
	<div id='log'>
	</div>
	<hr>
	<a href="http://twitter.com/kissrobber">@kissrobber</a>,
	<a href="http://iq148.com">blog1</a>,
	<a href="http://d.hatena.ne.jp/kissrobber">blog2</a>
</body>
</html>