使用Node.js-0.8.20和socket.io-0.9.13实现WebSocket-CSDN博客

本文链接：https://blog.csdn.net/dllyj86/article/details/84394058

参考资料:
[url]http://cnodejs.org/topic/4f32142e69bab4d67601bd1b[/url]
[url]http://www.oschina.net/question/12_54009[/url]

在使用socket.io之前,我按照网上的各种成功的例子,尝试使用node-websocket-server库实现WebSocket.
我先从[url]https://github.com/miksago/node-websocket-server[/url]下载的node-websocket-server. 然后使用Chrome24浏览器,通过WebSocket对象发送请求,结果服务器端识别成draft75,并且报process.studo.flush函数不存在等异常.网上说是库的版本过低,无法识别新的WebSocket标准.
估计网上的那些例子都是基于低版本的浏览器和node-websocket-server库实现的,于是我放弃node-websocket-server库,改用socket.io库.

[b]1. 下载和安装Node.js[/b]

下载地址:[url]http://nodejs.org/dist/v0.8.20/node-v0.8.20-x86.msi[/url]
下载之后在本地执行安装.

[b]2. 安装socket.io[/b]

我使用Eclipse创建的工程的目录结构:
-----------------------------------------------
[img]http://dl.iteye.com/upload/attachment/0080/7560/6f8b609d-d582-3cea-9fae-943f6f701a3a.jpg[/img]
-----------------------------------------------

打开CMD,跳转到WebContent目录下,执行命令: npm install socket.io
等待,直到安装完毕,返回CMD输入状态.
安装完成的secket.io库的目录结构:
-----------------------------------------------
[img]http://dl.iteye.com/upload/attachment/0080/7562/2194f30a-db6e-3a8b-abf8-3f4b2d2ed4a1.jpg[/img]
-----------------------------------------------
[img]http://dl.iteye.com/upload/attachment/0080/7564/2b8d971f-eb0b-3d50-ab73-4ca126194f4e.jpg[/img]
-----------------------------------------------

[b]3. 创建服务器端代码Server.js[/b]


var fs = require('fs'), http = require('http'), socketio = require('socket.io');

var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-type': 'text/html'});
    res.end(fs.readFileSync(__dirname + '/index.html'));
}).listen(8080, function() {
    console.log('Listening at: http://localhost:8080');
});

socketio.listen(server).on('connection', function (socket) {
    socket.on('message', function (msg) {
        console.log('Message Received: ', msg);
        socket.broadcast.emit('message', msg);
    });
});

[b]4. 创建客户端代码index.html[/b]


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<!-- 这里要引用secket.io客户端文件 -->
<script type="text/javascript" src="node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js"></script>
<script type="text/javascript" src="Client.js"></script>
</head>
<body>
	<div>
		Incoming Chat: <ul id="incomingChatMessages"></ul>
		<br/>
		<input type="text" id="outgoingChatMessage">
		<button id="openConnect">Send Message</button>
	</div>
</body>
</html>

[b]5. 创建客户端代码Client.js[/b]


$(document).ready(function(){
	var iosocket = io.connect("http://localhost:8080");
    iosocket.on('connect', function () {
        $('#incomingChatMessages').append($('<li>Connected</li>'));

        iosocket.on('message', function(message) {
            $('#incomingChatMessages').append($('<li></li>').text(message));
        });
        iosocket.on('disconnect', function() {
            $('#incomingChatMessages').append('<li>Disconnected</li>');
        });
    });
    $("#openConnect").click(function(event){
		openConnect(iosocket);
	});
});

function openConnect(iosocket){
    iosocket.send($('#outgoingChatMessage').val());
    $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));
    $('#outgoingChatMessage').val('');
}