小小聊天室

最新推荐文章于 2020-12-03 17:17:41 发布

原创最新推荐文章于 2020-12-03 17:17:41 发布 · 323 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web-socket

web-socket 专栏收录该内容

1 篇文章

订阅专栏

Express与Scoket.IO

Express框架可以与Socket.IO搭配使用但是不像平常的Express程序那样，用app.listen来监听了，而是采用一种固定的模式：

var express = require("express");
var app = express();
var http = require("http").Server(app);
var io = require("socket.io")(http);

http.listen(3000);

各路由程序：

var express = require("express");
var app = express();
var http = require('http').Server(app);
var io = require('Socket.io')(http);
var session = require("express-session");
//提供静态服务
app.use(express.static("./public"));
app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true
}))
//设置模板引擎
app.set("view engine","ejs");
var allusers = [];
//显示首页
app.get("/",function (req,res,next) {
    res.render("index");
})
//确认登陆,检查此人是否有用户名，且不重复
app.get("/check",function (req,res,next) {
    var username = req.query.yonghuming;
    if(!username){
        res.send("必须填写用户名!");
        return;
    }
    if(allusers.indexOf(username) != -1){
        res.send("用户名已经被占用");
        return;
    }
    allusers.push(username);
    //赋给session
    req.session.username = username;
    res.redirect("/chat");
})

//聊天室
app.get("/chat",function (req,res,next) {
    //这个页面要求用户必须登录
    if(!   req.session.username){
        res.redirect("/");
        return;
    }
    res.render("chat",{
        "username":req.session.username
    });
})
io.on("connection",function (socket) {
    socket.on("liaotian",function (msg) {
        io.emit("liaotian",msg);
    })
})
http.listen(3000);

主页面：

<style>
    div{
        width: 700px;
        height: 30px;
        padding: 40px;
        border:1px solid #000;
        margin: 0 auto;
    }
</style>

<body>
   <div>
       <form action="/check" method="get">
          输入昵称：
          <input type="text" id="username" name="yonghuming">
          <input type="submit" value="进入聊天室">
       </form>
   </div>

聊天页面：

 <h3>小小聊天室  欢迎：<span id="user"><%=username%></span></h3>
    <div>
      <ul class="liebiao">
      </ul>
    </div>
    <div class="caozuo">
       <input type="text" id="neirong" value="">
       <input type="button" id="fayan" value="按回车键发言">
    </div>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="/jquery-3.2.1 (2).js"></script>
    <script type="text/javascript">
       //神秘的socket文件提供的
       var socket = io();
       //将发送修改为按下回车键
       $("#neirong").keydown(function (e) {
         if(e.keyCode == 13){
            //点击按钮将文本框的内容上传
            socket.emit("liaotian",{
              "neirong":$("#neirong").val(),
               "user":$("#user").html()
            });
            $(this).val("");
          }
        })
        socket.on("liaotian",function (msg) {
          $(".liebiao").prepend("<li><b>"+msg.user+"说："+"</b>"+msg.neirong+"</li>");
        })
    </script>