express websocket.io实现聊天功能 - CyberSage-hub/express GitHub Wiki

安装express(~4.13.4版本)

//修改npm源
npm config set registry https://registry.npm.taobao.org
$ mkdir chat
$ cd chat
$ npm init  //一路回车默认
$ npm install express --save

或者使用express生成器安装express

$ npm install express-generator -g
$ express -h //查看帮助信息
$ express chat
$ cd chat 
$ npm install

再安装supervisor模块，实现修改文件自动刷新

$ npm install -g supervisor

安装socket.io模块，官方文档见https://socket.io/

$ npm install socket.io  
$ cd chat
$ supervisor bin/www

打开浏览器localhost:3000刷新页面，即可看到页面

设置ejs为默认模板引擎，安装完的express默认为jade模板引擎

app.set('view engine', 'jade');
//改成
app.set('view engine', 'ejs');
//到项目根目录views文件下下，新建三个模板文件error.ejs,index.ej,slayer.ejs,注意文件后缀名为ejs

//前面安装完socket.io后，这里会自动到根目录下引入socket.io.js文件
<script src="/socket.io/socket.io.js"></script>
//下载jquery文件放在项目根目录的javascripts目录下并引入
<script src="javascripts/jquery3.2.1.js"></script>

详细html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket</title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no, adress=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="stylesheets/style.css" rel="stylesheet">
    <style>
        .wrap{
            width: 100%;
            margin-top: 10%;
        }
        #message{
            float: left;
            width: 70%;
            height: 40px;
            border: 1px solid #efefef;
            padding-left: 10px;
        }
        #send{
            width: 30%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #00B7FF;
            color: #fff;
            float: left;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            cursor: default;
        }
    </style>
</head>
<script src="/socket.io/socket.io.js"></script>
<script src="javascripts/jquery3.2.1.js"></script>
<script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/2.5.1/vconsole.min.js"></script>
<script>
var socket = io.connect('http://localhost:3000');
    socket.on('news', function (res) {
        console.log(res);
        $("#messageBox").before('<div>'+res+'</div>');
    });
    $(function () {
        $("#send").click(function () {
            socket.emit('send',$("#message").val());
        });

    })
</script>
<body>
<div class="wrap">
    <input id="message" type="text" placeholder="请输入消息">
    <div id="send">发消息</div>
    <div id="messageBox"></div>
</div>
</body>
</html>

服务器端发消息到客户端

//回复当前请求客户端
socket.emit('message', "this is a test");

// 回复所有客户端，除了当前请求客户端
socket.broadcast.emit('message', "this is a test");

// 回复所有客在game房间里的所有客户端，除了当前请求客户端
socket.broadcast.to('game').emit('message', 'nice game');

//回复所有客户端，包括当前请求客户端
io.sockets.emit('message', "this is a test");

// 回复所有客在game房间里的所有客户端，包括当前请求客户端
io.sockets.in('game').emit('message', 'cool game');

//获取socketid和room
var io = require('socket.io')(server);
io.on('connection', function (socket) {
    var socketId = socket.id;
    socket.on('send', function (id, msg) {
        let rooms = Object.keys(socket.rooms);
            rooms = rooms[0]；
           console.log(rooms);
    });
});
// 发给指定的socketid客户端,socketId获取方法见下文
io.sockets.to(socketId).emit('news', '只有你看得见---socketId');
io.sockets.to(rooms).emit('news', '只有你看得见---rooms');
⚠️ **GitHub.com Fallback** ⚠️