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

最新推荐文章于 2020-11-04 11:06:44 发布

磊燕

最新推荐文章于 2020-11-04 11:06:44 发布

阅读量477

点赞数

CC 4.0 BY-SA版权

分类专栏： node.js学习文章标签： websocket nodejs 服务器

本文链接：https://blog.youkuaiyun.com/wl812peter/article/details/56320826

node.js学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Socket.IO实现一个简单的聊天室应用。通过Express框架和Socket.IO库，搭建了一个具备实时消息推送功能的聊天室。该应用支持跨浏览器和设备的实时通信，并提供了源代码供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;