技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
web socket io 聊天系统 简易demo
package.josn node安装包 ，运行npm install
{
"name": "websocket",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.14.1",
"socket.io": "^1.7.3"
}
}
服务端代码：
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res) {
res.send('<h1>Welcome Realtime Server1</h1>');
});
//在线用户
var onlineUsers = {};
var onlineCount = 0;
io.on('connection', function(socket) {
console.log('a user connected');
//登录用户
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
});
//fn('a') ;
console.log(obj.username + '加入了聊天室');
});
//logout用户
socket.on('logout', function(obj) {
//将新加入用户的唯一标识当作socket的名称，后面退出的时候会用到
});
//监听用户退出
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);
});
});
http.listen(3000, function() {
console.log('listening on *:3000');
});
原码:html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
<script src="js/jquery-1.10.1.min.js"></script>
</head>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding: 15px;
}
.username_form{
padding: 15px 0
}
.input{
border:0 none;
padding: 15px 2px;
}
.input01{
border-bottom: 1px solid #ccc;
}
input.input02{
border: 1px solid #ccc;
}
.t-username{
color: #f30;
border-bottom: 1px solid #f30
}
</style>
<body>
<form action="" id="form_username" class="username_form">
<input type="text" id="username" class="input input01" name="username" style="width: 200px;" value="" placeholder="请先输入你在聊天室的昵称 " />
<input type="submit" class="submit" value="submit"/>
</form>
<ul id="message1"></ul>
<form action="" id="form">
<input type="text" name="content" class="input input01" value="" placeholder="你太懒了，说两句吧" />
<input type="submit" id="submit" value="submit"/>
</form>
<script>
var socket = io.connect('ws://127.0.0.1:3000');
function userBrowser() {
var browserName = navigator.userAgent.toLowerCase();
if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
return 'IE';
} else if (/firefox/i.test(browserName)) {
return 'Firefox';
} else if (/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)) {
return 'Chrome';
} else if (/opera/i.test(browserName)) {
return 'Opera';
} else if (/webkit/i.test(browserName) && !(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))) {
return 'Safari';
} else {
return 'unkown'
}
}
var getRandomColor = function(){
return '#' +
(function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
};
$(function() {
var ws = {
username:null,
userid:null,
socket:null,
getusername_color: null,
logout:function(){
//this.socket.disconnect();
location.reload();
},
};
var form = $('#form');
//关键点是这里： scoket on 对应的action 接收处理；
socket.on("message", function(obj) {
//document.querySelector("#message").innerHTML = obj.msg;
$('#message1').append('<li>' + obj.msg + '</li>');
});
ws.getusername_color = getRandomColor();
var currbrower = navigator.userAgent;
form.on('click', '#submit', function(e) {
e.preventDefault();
if(ws.userid == null) {
alert('请先添加用户名')
return;
}
var self = $(this),
msg = self.prev().val()
/*var obj = {
userid: this.userid,
username: this.username,
content: content
};*/
socket.emit("message", {
"name": 'test',
"msg": '<span style=color:'+ws.getusername_color+'>' + ws.username + ' say</span>: ' + msg
});
self.prev().val('');
})
$('#form_username')
.on('click', '#logout', function(){
socket.on('logout', function(o){
alert('退出')
});
ws.logout();
})
.on('click', '.submit', function(e) {
e.preventDefault();
var self = $(this),
name = self.prev().val(),
userid = new Date().getTime()+""+Math.floor(Math.random()*899+100);
if(name == '') {
alert('请先添加用户名')
return;
}
ws.username = name;
ws.userid = userid;
//告诉服务器端有用户登录
socket.emit('login', {userid:userid, username:username});
//监听新用户登录
socket.on('login', function(o){
self.closest('form').html('当前用户名：<span class="t-username">' + name + '</span> <a href="javascript:;" id="logout">退出</a></span> 当前共有 '+o.onlineCount+' 人在线，在线列表');
});
})
});
</script>
</body>
</html>
share
{
"name": "websocket",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.14.1",
"socket.io": "^1.7.3"
}
}
服务端代码：
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res) {
res.send('<h1>Welcome Realtime Server1</h1>');
});
//在线用户
var onlineUsers = {};
var onlineCount = 0;
io.on('connection', function(socket) {
console.log('a user connected');
//登录用户
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
});
//fn('a') ;
console.log(obj.username + '加入了聊天室');
});
//logout用户
socket.on('logout', function(obj) {
//将新加入用户的唯一标识当作socket的名称，后面退出的时候会用到
});
//监听用户退出
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);
});
});
http.listen(3000, function() {
console.log('listening on *:3000');
});
原码:html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
<script src="js/jquery-1.10.1.min.js"></script>
</head>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding: 15px;
}
.username_form{
padding: 15px 0
}
.input{
border:0 none;
padding: 15px 2px;
}
.input01{
border-bottom: 1px solid #ccc;
}
input.input02{
border: 1px solid #ccc;
}
.t-username{
color: #f30;
border-bottom: 1px solid #f30
}
</style>
<body>
<form action="" id="form_username" class="username_form">
<input type="text" id="username" class="input input01" name="username" style="width: 200px;" value="" placeholder="请先输入你在聊天室的昵称 " />
<input type="submit" class="submit" value="submit"/>
</form>
<ul id="message1"></ul>
<form action="" id="form">
<input type="text" name="content" class="input input01" value="" placeholder="你太懒了，说两句吧" />
<input type="submit" id="submit" value="submit"/>
</form>
<script>
var socket = io.connect('ws://127.0.0.1:3000');
function userBrowser() {
var browserName = navigator.userAgent.toLowerCase();
if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
return 'IE';
} else if (/firefox/i.test(browserName)) {
return 'Firefox';
} else if (/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)) {
return 'Chrome';
} else if (/opera/i.test(browserName)) {
return 'Opera';
} else if (/webkit/i.test(browserName) && !(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))) {
return 'Safari';
} else {
return 'unkown'
}
}
var getRandomColor = function(){
return '#' +
(function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
};
$(function() {
var ws = {
username:null,
userid:null,
socket:null,
getusername_color: null,
logout:function(){
//this.socket.disconnect();
location.reload();
},
};
var form = $('#form');
//关键点是这里： scoket on 对应的action 接收处理；
socket.on("message", function(obj) {
//document.querySelector("#message").innerHTML = obj.msg;
$('#message1').append('<li>' + obj.msg + '</li>');
});
ws.getusername_color = getRandomColor();
var currbrower = navigator.userAgent;
form.on('click', '#submit', function(e) {
e.preventDefault();
if(ws.userid == null) {
alert('请先添加用户名')
return;
}
var self = $(this),
msg = self.prev().val()
/*var obj = {
userid: this.userid,
username: this.username,
content: content
};*/
socket.emit("message", {
"name": 'test',
"msg": '<span style=color:'+ws.getusername_color+'>' + ws.username + ' say</span>: ' + msg
});
self.prev().val('');
})
$('#form_username')
.on('click', '#logout', function(){
socket.on('logout', function(o){
alert('退出')
});
ws.logout();
})
.on('click', '.submit', function(e) {
e.preventDefault();
var self = $(this),
name = self.prev().val(),
userid = new Date().getTime()+""+Math.floor(Math.random()*899+100);
if(name == '') {
alert('请先添加用户名')
return;
}
ws.username = name;
ws.userid = userid;
//告诉服务器端有用户登录
socket.emit('login', {userid:userid, username:username});
//监听新用户登录
socket.on('login', function(o){
self.closest('form').html('当前用户名：<span class="t-username">' + name + '</span> <a href="javascript:;" id="logout">退出</a></span> 当前共有 '+o.onlineCount+' 人在线，在线列表');
});
})
});
</script>
</body>
</html>