|
阅读：11558回复：2
websocket + nodejs 的express框架 做个简单的网页聊天室描述：websocket与服务端的原理图 图片：websocket原理图.png 
websocket 与 服务器之间的原理图 代码说明：在页面加载时，就执行下面的代码。首先是创建一个websocket，即与指定的地址，创建一个通道. 然后，给此通道添加对应的事件。打开时，监听到消息时，关闭时对应的处理。 var socket = new WebSocket('ws://172.16.7.26:8888/');
// 打开Socket
socket.onopen = function(event) {
console.log("socket 已经打开");
// 发送消息到服务器， 此方法在socket在此方法外面也可以使用
socket.send('I am the client and I\'m listening!');
// 监听服务器返回的消息
socket.onmessage = function(event) {
console.log('Client received a message',event);
console.log(event.data); //得到服务器返回的消息数据
};
// 监听Socket的关闭
socket.onclose = function(event) {
console.log('Client notified socket has closed',event);
};
// 关闭Socket....
//socket.close()
};服务器：
说明： 第一部分是使用express框架，搭建服务器。 第二部分是关于服务器的socket, 因为，采用的是ws协议，所以，引用的是ws模块。 然后，创建一个ws地址。 在这其添加在对应的事件处理。 var express = require("./server/node_modules/express"); //引入express框架资源
var ws = require('./server/node_modules/ws').Server; //注意这里，客户端用的是ws://172.16.7.26:8888/ 这里用的是WS协议，所有我们加载的是ws框架
var app = express(); //执行express的全局函数，返回一个express的对象
app.set("port",9999); //键/值对的方式
//express 进行配置
app.configure(function(){
app.use(express.logger("dev")); //日志模块，主要是开发者使用的
//使用post 接收数据的两个配置
app.use(express.bodyParser()); //使用了bodyParser模块，把参数的数据封装在requestbody里面
app.use(express.methodOverride()); //非get请求的转换
app.use(app.router); //设置路由,分发
// __dirname:这是一个全局变量，返回就是当前文件的一个目录
app.use(express.static(__dirname+"/client"));//静态资源文件的路径
}
);
app.get('/', function(req, res){
res.redirect("socket.html");
});
app.listen(app.get("port"),function(req,resp){
console.log("请求来了");
});
//------------------------下面是关于socket服务端相关内容-------------------------------
var cons = new Array(); //数组，用户存储与客户的连接
var server = new ws({host:"172.16.7.26",port:8888}); //创建一个ws的地址，注意，这个地址就是客户端请求的socket服务端的地址
//给服务的连接事件，添加对应的方法
server.on('connection',function(ws){
console.log('new connection founded successfully');
cons.push(ws); // 每当建立一个连接成功后，就将这个连接加入到数组中
ws.on('message',function(data){ //得到客户端发送的消息的事件处理
for(var i=0;i<cons.length;i++){
cons[i].send(data); //将得到的数据，发送到每一个客户端
console.log("接收到数据："+data);
}
});
ws.on('close',function(){ //当关闭一个连接时的处理
for(var i=0;i<cons.length;i++){
if(cons[i] == ws) cons.splice(i,1);
}
});
});DEMO原码：
客户端： <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#CharMessage{
color: white;
border: 1px solid black;
height: 500px;
width: 300px;
overflow-y: scroll;
background: url(img/1.png);
}
</style>
<body>
<div id="login">
<p>登 录</p>
<p><input type="text" name="txtName" id="txtName" placeholder="请输入用户名"/></p>
<button onclick="funlogin()">登录</button>
</div>
<div id="chart" style="display: none;">
<div id="CharMessage"></div>
<p></p>
<input type="text" name="txtMessage" id="txtMessage" placeholder="请输入发送的消息"/>
<button onclick="sendMessage()">发送</button>
<button onclick="logout()">注销</button>
<p>当前在线人数：<span id="spanNum"></span></p>
</p>
</div>
<script type="text/javascript">
var socket;
var dMessage;
var username;
var login = document.getElementById("login");
var chart = document.getElementById("chart");
var spanNum = document.getElementById("spanNum");
window.onload = function(){
dMessage = document.getElementById("CharMessage");
socket = new WebSocket('ws://172.16.7.26:8888/');
// 打开Socket
socket.onopen = function(event) {
console.log("socket 已经打开");
// 发送一个初始化消息
// socket.send('I am the client and I\'m listening!');
// 监听消息
socket.onmessage = function(event) {
console.log('Client received a message',event);
var jsonobj = JSON.parse(event.data);
dMessage.innerHTML="<p> <b>"+jsonobj.name+"说：</b> "+jsonobj.message+"</br><div style='text-align: right'>"+(new Date()).toLocaleTimeString()+" </div></p>"+ dMessage.innerHTML; // 加载服务器发送过来的留言
spanNum.innerHTML=jsonobj.online+" 人";
};
// 监听Socket的关闭
socket.onclose = function(event) {
console.log('Client notified socket has closed',event);
};
// 关闭Socket....
//socket.close()
};
checkLogin();
}
//判断是否登录
function checkLogin(){
if(localStorage.getItem("username")==null||localStorage.getItem("username")==undefined){
login.style.display="block";
chart.style.display="none";
}else{
login.style.display="none";
chart.style.display="block";
username =localStorage.getItem("username");
}
}
function sendMessage(){
var message = document.getElementById("txtMessage").value;
var jsonobj = {name:username,message:message,online:""};
socket.send(JSON.stringify(jsonobj)); //发送信息到服务器
document.getElementById("txtMessage").value="";
}
function socketClose(){
socket.close();
}
function funlogin(){
var name = document.getElementById("txtName").value;
localStorage.setItem("username",name);
checkLogin();
}
function logout(){
localStorage.removeItem("username");
checkLogin();
}
</script>
</body>
</html>服务器：
var express = require("./server/node_modules/express"); //引入express框架资源
var ws = require('./server/node_modules/ws').Server;
var app = express(); //执行express的全局函数，返回一个express的对象
app.set("port",9999); //键/值对的方式
//express 进行配置
app.configure(function(){
app.use(express.logger("dev")); //日志模块，主要是开发者使用的
//使用post 接收数据的两个配置
app.use(express.bodyParser()); //使用了bodyParser模块，把参数的数据封装在requestbody里面
app.use(express.methodOverride()); //非get请求的转换
app.use(app.router); //设置路由,分发
// __dirname:这是一个全局变量，返回就是当前文件的一个目录
app.use(express.static(__dirname+"/client"));//静态资源文件的路径
}
);
app.get('/', function(req, res){
res.redirect("socket.html");
});
app.listen(app.get("port"),function(req,resp){
console.log("请求来了");
});
var cons = new Array();
var server = new ws({host:"172.16.7.26",port:8888});
server.on('connection',function(ws){
console.log('new connection founded successfully');
cons.push(ws);
ws.on('message',function(data){
var jsonobj = JSON.parse(data);
jsonobj.online = cons.length;
data = JSON.stringify(jsonobj);
for(var i=0;i<cons.length;i++){
cons[i].send(data);
console.log("接收到数据："+data);
}
});
ws.on('close',function(){
for(var i=0;i<cons.length;i++){
if(cons[i] == ws) cons.splice(i,1);
}
});
}); |
|
|
|
板凳#
发布于：2016-08-17 09:44
理论 + 实践，通俗易懂；
websocket protocol 是H5中的新协议，用在聊天室的文本、图片等媒体传输too easy,坐等其火。 |
|
