您的位置：首页 > Web前端 > Node.js

记websocket（windows系统下nodejs,node-websocket-server实现简单聊天）

2012-06-28 17:35 806 查看
websocket原理这里不再叙述，网上文章很多。

这里主要说一下我配置的过程。

nodejs的安装过程：下载地址直接安装就OK了

我直接按默认目录来安装的。

安装完之后安装websocket-server（现在新版本的nodejs支持在windows系统上直接运行upm及node命令）

在项目目录下在运行态输入如下的命令（注意是在项目目录下）

npm install websocket-server

现在nodejs与websocket-server已经安装完毕。
将服务器端写在某个js中

var conns = new Array();
var ws = require('websocket-server');
var server = ws.createServer();
server.addListener('connection', function(conn)
{
console.log('connection....');
conns.push(conn);
conn.addListener('message',function(msg)
{
console.log(msg);
for(var i=0; i<conns.length; i++)
{
if(conns[i]!=conn)
{
conns[i].send(msg);
}
}
});
});

server.listen(8080);
console.log('running......');
客户端，代码如下：
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
var host = '127.0.0.1';
var port = 8080;
var url = 'ws://'+host+':'+port+'/';
var w = new WebSocket(url);  //构建于服务器之间的连接通信
<!--var audioElement = document.createElement('audio');  -->

<!--audioElement.setAttribute('src', 'qqmsg.mp3');-->
w.onopen = function()//通过onopen事件句柄来监听socket的打开事件
{
$('chat-box').innerHTML = '已连接到服务器......<br/>';
}
w.onmessage = function(e)//用onmessage事件句柄接受服务器传过来的数据
{
var msg = e.data;
var chatBox = $('chat-box');
// audioElement.play();
chatBox.innerHTML = chatBox.innerHTML+msg+'<br/>';
}

function send()//使用send方法向服务器发送数据
{
var talk = $('talk');
var nike = $('nike');
w.send('<strong style="color:red">'+nike.value+':</strong>'+talk.value);
}
function $(id)
{
return document.getElementById(id);
}
</script>
</head>
<body>
<div id="chat-box" style="border:1px solid #cccccc; width:400px; height:400px; overflow:scroll;"></div>
昵称:
<input type="text" id="nike"/>
<br/>
内容:
<input type="text" id="talk"/>
<input type="button" id="send" onClick="send();" value="发送"/>
</body>
</html>
目录结构如下：



在运行台中输入如下命令，开启服务器：



在safari浏览器中调试。

不要使用谷歌浏览器，会出现如下的错误：Error during WebSocket handshake: 'Sec-WebSocket-Accept' header is missing

原因如下：

因为websocket协议已经更新到13版本。

客户端发送数据格式类似这样：

GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1  .P00
Sec-WebSocket-Protocol: sample
Upgrade: WebSocket
Sec-WebSocket-Key1: 4 @1  46546xW%0l 1 5
Origin: http://example.com ^n:ds[4U


服务端返回的信息是：

HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo
Sec-WebSocket-Protocol: sample
8jKS’y:G*Co,Wxa-


但是之前的版本是这样的：

客户端发送数据格式类似这样：

GET /chat HTTP/1.1

Upgrade: WebSocket

Connection: Upgrade

Host: www.zendstudio.net:9108

Origin: http://www.zendstudio.net
Cookie: somenterCookie

此时服务端应该返回的信息是：

HTTP/1.1 101 Web Socket Protocol Handshake

Upgrade: WebSocket

Connection: Upgrade

WebSocket-Origin: http://www.zendstudio.net
WebSocket-Location: ws://www.zendstudio.net:9108/chat

从这里我们太容易看出来，websocket协议的握手部分根本就是个类http的协议，所不同的是http每次都会有这样子的头信息交互，这在某些时候不得不显得很糟糕。而websocket只会执行一次这个过程，之后的传输信息就变得异常简洁了。

这里我们发现，version 13这个版本的websocket协议，与之前版本最大不同就是多了一个验证，客户端会发送一个“Sec-WebSocket-Key”的base64编码的密钥，要求服务端必须返回一个“Sec-WebSocket-Accept”，否则客户端会抛出一个“Error during WebSocket handshake: Sec-WebSocket-Accept mismatch”错误之后，关闭连接，当然，这个Sec-WebSocket-Accept的值是计算出来的。

谷歌14版本+支持新的标准，而websocket-server是按原来的版本写的。火狐也有类似的原因。

运行结果如下：



参考文章：点击
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  websocket windows 聊天 function 服务器 socket
相关文章推荐
新的分享
章节导航