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

本文介绍如何使用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最主要的特点是自适应性,它能从如下通信方式中选择最优最佳的方式来实现网络实时应用。

  1. websocket
  2. Adobe flash socket
  3. AJAX long polling
  4. AJAX multipart streaming
  5. Forver iframe
  6. 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;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值