示例
这里只贴一下关键的使用到的技术。部分在网上找的，还有些在socket.io官方网站找到的api。东拼西揍的。
服务端:node.js+socket.io+erpress等
1，node.js依赖
"dependencies": {
"express": "^4.14.0",
"fs": "0.0.1-security",
"socket.io": "^1.7.2"
}直接npm install （以下是node.js文件，可以终端输入 node node.js 启动）
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.send('<h1> node Server</h1>');
});
http.listen(1989, function(){
console.log('listening on *:1989');
});
//在线用户
var onlineUsers = {};
//当前在线人数
var onlineCount = 0;
io.on('connection', function (socket) {
console.log('连接成功了');
//监听新用户加入
socket.on('login', function(obj){
//将新加入用户的唯一标识当作socket的名称，后面退出的时候会用到
socket.name = obj.userid;
//检查在线列表，如果不在里面就加入
if(!onlineUsers.hasOwnProperty(obj.userid)) {
onlineUsers[obj.userid] = obj.username;
//在线人数+1
onlineCount++;
}
//向所有客户端广播用户加入
io.emit('login', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
console.log(obj.username+'加入了聊天室');
});
//监听用户退出(服务器断开)
socket.on('disconnect', function(){
//将退出的用户从在线列表中删除
if(onlineUsers.hasOwnProperty(socket.name)) {
//退出用户的信息
var obj = {userid:socket.name, username:onlineUsers[socket.name]};
//删除
delete onlineUsers[socket.name];
//在线人数-1
onlineCount--;
//向所有客户端广播用户退出
io.emit('logout', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
console.log(obj.username+'退出了聊天室');
}
});
//监听用户发布聊天内容
socket.on('message', function(obj){
//向所有客户端广播发布的消息
io.emit('message', obj);
console.log(obj.username+'说：'+obj.content);
});
//发送消息到客户端
//socket.send('我发送消息到客户端');
socket.on('reconnect', function() {
console.log("重新连接到服务器");
});
//客户端ID列表 跨越所有节点，所有(所有在线的节点)
io.clients(function(error, clients){
if (error) throw error;
console.log(clients);
});
});以下是html代码，没写全。要自已上用bootstrap 及socket.io.js<extend name='Public/_Main' />
<block name='title'>{$title}</block>
<block name='body'>
<style type="text/css">
.media {
border-bottom: 1px solid #ddd;
margin-bottom: 10px,
}
</style>
<div class='container'>
<div class="panel panel-default">
<div class="panel-heading">{$title}</div>
<div class="panel-body">
<!--register-->
<div class='col-xs-4'>
<div class="list-group" id='userlists'>
<a href="#" class="list-group-item active">在线用户</a>
</div>
</div>
<div class='col-xs-8'>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">在线聊天<span id='onlinecount'></span></h3>
</div>
<div class="panel-body">
<!--chart-->
<ul class="media-list" id="message">
</ul>
<!--end chart-->
<textarea class="form-control" rows="3" name='body' id='body'></textarea>
<br/>
<button type="button" class="btn btn-danger" id="submit">发送</button>
</div>
</div>
</div>
<!--end register-->
</div>
</div>
</div>
</block>
<block name='javascript'>
<script>
var socket = io('http://127.0.0.1:1989');
//接收所有广播消息
socket.on('msg', function(data) {
console.log(data);
});
socket.on('connect', function() {
console.log('连接成功');
});
socket.on('connecting', function() {
console.log('正在连接');
});
socket.on('disconnect', function() {
console.log('断开连接了');
});
socket.on('error', function() {
console.log('连接错误');
});
socket.on('reconnect', function() {
console.log('成功重连');
});
socket.on('reconnecting', function() {
console.log('正在重连');
});
if (getUserId) {
//告诉服务端有用户登陆
socket.emit('login', {
'userid': getUserId,
'username': getUserId + 'name'
});
} else {
alert('你还没登陆');
}
//监听新用户登陆
socket.on('login', function(o) {
updateSysMsg(o, 'login');
});
//监听用户退出
socket.on('logout', function(o) {
updateSysMsg(o, 'logout');
});
//监听消息发送
socket.on('message', function(obj) {
var isme = (obj.userid == getUserId) ? true : false;
var contentDiv = '<div class="media-body">' + obj.content + '</div>';
var usernameDiv = '<a class="media-left" href="#">' + obj.username + '</a>';
var section = '<li class="media">' + usernameDiv + contentDiv + '</li>';
var section = document.createElement('li');
if (isme) {
section.className = 'media';
section.innerHTML = usernameDiv + contentDiv;
} else {
section.className = 'media text-warning';
section.innerHTML = usernameDiv + contentDiv;
}
document.getElementById('message').appendChild(section);
});
//更新系统消息，本例中在用户加入、退出的时候调用
function updateSysMsg(o, action) {
//当前在线用户列表
var onlineUsers = o.onlineUsers;
//当前在线人数
var onlineCount = o.onlineCount;
//新加入用户的信息
var user = o.user;
//更新在线人数
var userhtml = '';
var separator = '';
for (key in onlineUsers) {
if (onlineUsers.hasOwnProperty(key)) {
if (action == 'login') {
var userlisthtml = document.createElement('a');
userlisthtml.className = "list-group-item";
userlisthtml.innerHTML = onlineUsers[key];
document.getElementById('userlists').appendChild(userlisthtml);
};
}
}
//添加系统消息
var html = '';
html += user.username;
html += (action == 'login') ? ' 加入了聊天室' : ' 退出了聊天室';
document.getElementById("onlinecount").innerHTML = '当前共有 ' + onlineCount + ' 人在线';
//添加系统消息
var html = '';
html += '<div class="well well-sm">';
html += user.username;
html += (action == 'login') ? ' 加入了聊天室' : ' 退出了聊天室';
html += '</div>';
var section = document.createElement('section');
section.innerHTML = html;
document.getElementById('message').appendChild(section);
}
$("#submit").click(function() {
var send = $("#body").val();
if (!send) {
alert('你什么都没有说吧');
} else {
var obj = {
userid: getUserId,
username: getUserId + '+name',
content: send
};
socket.emit('message', obj);
}
return false;
});
</script>
</block> 