socket.io入门以及简易聊天室Demo的展示

来源：互联网发布：java课程设计订餐系统编辑：程序博客网时间：2024/05/16 02:14

socket.io入门以及简易聊天室Demo的展示

基础理论

目前很多网站都用到了实时通讯技术，如websocket、AJAX long polling等等。而前段时间自己为了实现一个消息实时推送功能是也用到了相关技术，最终是使用socket.io这个nodejs的库来实现的。

socket.io是一个实现实时通讯技术的库。它既包括了客户端的js代码又包括了服务器端的nodejs代码，因此开发起来非常容易。socket.io旨在实现在不同浏览器和移动设备上进行实时通信。而socket.io最主要的特点是自适应性，它能从如下通信方式中选择最优最佳的方式来实现网络实时应用。

websocket
Adobe flash socket
AJAX long polling
AJAX multipart streaming
Forver iframe
Jsonp polling

聊天室Demo展示

我使用express+socket.io来做展示：
详细Demo的GitHub地址：https://github.com/wlpeter/socketTest

前端代码：

<!DOCTYPE html><html>  <head>    <title><%= title %></title>    <link rel='stylesheet' href='/css/style.css' />    <script src="/js/jquery.min.js"></script>    <script src="/socket.io/socket.io.js"></script>    <script>        $(function(){            var iosocket;            $("#connect").click(function () {                iosocket = io.connect('/');    // 可指定命名空间也可不指定                iosocket.on('connect', function () {                    $("#connect").attr("disabled", true);                    $("#send").removeAttr("disabled");                    $("#status").append("<div>连接成功</div>");                });                iosocket.on('disconnect', function() {                    $("#send").attr("disabled", true);                    $("#connect").removeAttr("disabled");                    $("#status").append("<div>连接断开</div>");                });                iosocket.on('DATA', function (data) {                   $("#result").append("<div>" + data + "</div>");                });            });            $("#send").click(function () {                if (!$("#name").val() || !$("#data").val()) {                    $("#status").append("<div>信息填写错误</div>");                } else {                    $("#result").append("<div>" + $("#name").val() + ": " + $("#data").val() + "</div>");                    iosocket.send($("#name").val() + ": " + $("#data").val());                }            });       });   </script>  </head>  <body>    <h1>聊天室</h1>    <hr>    聊天内容如下:    <p id="result"></p>    <hr>    <div >用户名:</div>    <input type="text" id="name" value="">    <div >聊天内容:</div>    <textarea id="data" rows="8" cols="80"></textarea>    <br/>    <button type="button" id="send" disabled="true">发送信息</button>    <button type="button" id="connect">连接聊天室</button>    <br>    <p id="status"></p>  </body></html>

后端代码展示：

var express = require('express');var path = require('path');var http = require("http");var ejs = require('ejs');var routes = require('./routes/index');var app = express();app.set('views', path.join(__dirname, 'public/views'));app.engine('.html', ejs.renderFile);app.set('view engine', 'html');app.use(express.static(path.join(__dirname, 'public')));app.use('/', routes);app.use(function(req, res, next) {    res.sendStatus(404);});var server = require('http').createServer(app);var io = require('socket.io')(server);io.on('connection', function(socket){        console.log("ONLINE");    socket.on('disconnect', function () {        console.log("OVER");    });    socket.on('message', function (msg) {        socket.broadcast.emit('DATA', msg);     //向客户端发送消息    });    socket.on('error', function (err) {        console.log(err);    });});server.listen(3000);module.exports = app;

0 0