Node+Socketio实现消息群发功能

    注:本博文是作者原创,转载请注明出处。

    在项目中时常会使用到socketio,今天我们就来实现Node+socketio实现群发消息功能,
    项目源码:https://github.com/zhangxy1035/socketio
    注:在该项目中只是实现了功能,并没有对页面进行渲染美化,在接来下会继续更新此代码。
    关于socketio以及node在这里不再赘述,

    关于socketio的参考资料https://github.com/socketio/socket.io,

    node学习网站:https://nodejs.org/en/
    一、项目演示
    当服务器端代码发送数据时,客户端会接收到代码,如下图。

Node+Socketio实现消息群发功能

Node+Socketio实现消息群发功能

    二、项目构建

    在构建项目之前必须在自己目录中增加socketio模块,如图所示:命令为npm install socketio

    Node+Socketio实现消息群发功能

    app.js

 /**
* Created by caner on 2016/9/9.
* socket.io
*/
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(req,res){
fs.readFile('./index.html',function(error,data){
res.writeHead(200,{'Content-Type':'text/html'});
res.end(data,'utf-8');
})
}).listen(3000,'127.0.0.1');
console.log('server connection....'); var io = require('socket.io').listen(server);
io.sockets.on('connection',function(socket){
socket.on('message', function (data) {
socket.broadcast.emit('push message',data);
console.log(data);
})
})

    服务端页面:

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>服务端页面发送数据</title>
</head>
<body>
<form action="http://127.0.0.1:3000">
<textarea id="message" cols="30" rows="5"></textarea>
<input type="button" value="发送" onclick="t_push()">
</form>
<script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://127.0.0.1:3000');
var message = document.getElementById('message');
function t_push(){
socket.emit('message',{text:message.value});
document.getElementById('message').value = '';
} </script>
</body>
</html>

    客户端页面

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>客户端页面</title>
<script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
</head>
<body>
<textarea type="text" id="message"> </textarea>
<input type="button" value="清除" onclick="f_delete()">
<script>
var socket = io.connect('http://127.0.0.1:3000');
socket.on('push message',function(data){
document.getElementById('message').value=data.text;
});
function f_delete(){
document.getElementById('message').value='';
}
</script> </body>
</html>

    三、项目启动

    打开cmd命令窗口,找到自己app.js所在的目录,使用命令,node app.js启动项目。如图所示:

Node+Socketio实现消息群发功能

    然后打开自己的网页,服务端的textare填写信息,点击发送,客户端的网页就能获取到。

上一篇:[Angular 2] Set Properties on Dynamically Created Angular 2 Components


下一篇:pycharm2018.3.5 下载激活(windows平台)