node+websocket 实时聊天实例
最近，负责的游戏需要一个聊天功能，由于是实时的聊天，便想到了现在挺火的websocket,折腾了一天一夜，总算有点眉目了，现在总结如下：
websocket 是html5一个通信协议，可以实时通信。本例的聊天是用的socket的框架socket.io实现的，socket.io 集成了websocket和xhr-polling（长轮询）等多种通信方式
1.搭建node环境
从node官网，本人选择的window的msi 一键安装.安装完node 之后还需配置系统环境变量 PATH 属性里添加上你的测试地址路径. biu~ biu~
2.安装socket.io
用npm install-g socket.io 命令 或者从socket.io官网下载文件放到node_modules文件夹里面
3.服务端代码 server.js
view plaincopy
to clipboardprint?
-
/
-
* modules引入
-
*/
-
var express = require('express'),
-
sio = require('socket.io'),
-
fs=require('fs'),
-
path = require('path')
-
url = require('url');
-
-
-
-
-
-
var app = module.export = express.createServer();
-
-
-
-
-
-
var io = sio.listen(app);
-
-
io.configure(function () {
-
-
});
-
-
-
-
-
-
-
io.sockets.on('connection', function (socket){
-
-
socket.on('public message',function(msg, fn){
-
socket.broadcast.emit('public message',msg);
-
fn(true);
-
});
-
-
-
socket.on('disconnect', function(){
-
socket.broadcast.emit('public message','</pre>
-
<span style="color: red;">断开连接。。。</span>
-
<pre class="javascript">');
-
});
-
-
});
-
-
app.listen(3000, function(){
-
var addr = app.address();
-
console.log('app listening on http://127.0.0.1：' + addr.port);
-
});
4.客户端代码 chat.html
view plaincopy
to clipboardprint?
-
<!--<script src="/js/jquery.js"></script>
-
<script src="/js/socket.js"></script>--><script type="text/javascript">
-
$(function(){
-
-
var socket = io.connect('http://localhost:3000');
-
-
-
socket.on('connect', function(){
-
$('#connecting').fadeOut();
-
show('连接服务器成功')
-
});
-
-
-
socket.on('public message', function(msg){
-
show(msg);
-
});
-
-
$('#btn').click(function(){
-
var msg = $('#content').val();
-
-
socket.emit('public message', msg, function(ok){
-
if (ok) {
-
-
show(msg);
-
}
-
});
-
-
});
-
-
});
-
-
function show(msg){
-
var htm ="
-
-
<div class='message'>"+msg+"</div>
-
-
";
-
$('#main').append(htm);
-
}
-
-
<div id="main">
-
<div id="connecting">正在连接服务器..</div>
-
-
-
</div>
-
<div id="send"><input id="content" type="text" /><button id="btn">发送</button></div>
5.先运行 服务端 命令：node server.js
客服端访问client.html地址比如 http://localhost/…/chat.html
下面 是 Firefox和chrome的结果
ps:目前firebox不支持websocket协议，用的是xhr-polling ，chrome用的是标准的websocket协议
下面从node服务器截取的图片
现在websocket的标准还没确定，不同浏览器对握手协议支持的不同。 总之现在用websocket 是不推荐的，biu~biu~
更多原创文章 请关注我的博客 美公网天下
