最近,负责的游戏需要一个聊天功能,由于是实时的聊天,便想到了现在挺火的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
/
* modules引入
*/
var express = require('express'),
sio = require('socket.io'),
fs=require('fs'),
path = require('path')
url = require('url');
//=========================app配置=============================
/**
* app配置
*/
var app = module.export = express.createServer();
//=================配置socket.io=========================
/**
* 配置socket.io
*
*/
var io = sio.listen(app);
// assuming io is the Socket.IO server object
io.configure(function () {
///io.set("transports", ["websocket"]);
});
//===================socket链接监听=================
/**
* 开始socket链接监听
* @param {Object} socket
*/
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
<!--<script src="/js/jquery.js"></script>
<script src="/js/socket.js"></script>--><script type="text/javascript">// <![CDATA[
$(function(){
var socket = io.connect('http://localhost:3000');
//开始连接服务器
socket.on('connect', function(){
$('#connecting').fadeOut();
show('连接服务器成功')
});
// 接收public message
socket.on('public message', function(msg){
show(msg);
});
$('#btn').click(function(){
var msg = $('#content').val();
// 发送公共消息 public message
socket.emit('public message', msg, function(ok){
if (ok) {
show(msg);
}
});
});
});
function show(msg){
var htm ="
<div class='message'>"+msg+"</div>
";
$('#main').append(htm);
}
// ]]></script></pre>
<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~