[Nodejs]利用Socket.IO配合Express4搭建即时聊天

Socket.IO为WebSockets这个较新的web技术提供了必要的支持，包含客户端与服务端模块，以便建立通信通道，当然也可作为中间件而存在。

1 创建一个express项目

‍‍‍‍‍‍‍‍‍ ‍‍‍‍‍ 防工具盗链抓取【如果显示此文字，代表来自第三方转发】 freddon所有 ‍‍‍ ‍‍‍‍‍‍‍‍‍‍‍

可以使用命令行初始化一个express项目

先安装express

npm install express

npm install express-generator

express 项目名

cd 项目名

npm install socket.io

也可以在webstorm下新建express项目 File- new Project - Node.js Express App

创建好后文件视图大概是这样

2 服务端修改默认的文件内容

修改routes文件夹下的index.js为 chat.js

var express = require('express');
var router = express.Router();
var socket_io = require('socket.io');

/* GET users listing. */
router.get('/', function (req, res, next) {
    res.send('respond with a resource');
});


router.prepareSocketIO = function (server) {
    var io = socket_io.listen(server);
    io.sockets.on('connection', function (socket) {

        socket.on('join', function (user) {
            socket.user = user;
            socket.emit('state', 'SERVER', true);
            socket.broadcast.emit('state', 'SERVER', user + '上线了');
        });
        socket.on('sendMSG', function (msg) {
            socket.emit('chat', socket.user, msg);
            socket.broadcast.emit('chat', socket.user, msg);
        });

    });

};

module.exports = router;

修改app.js中

var index = require('./routes/index');

app.use('/index', index);

为

var chat = require('./routes/chat');

app.use('/chat', chat);

接下来就需要在app.js中写一个方法了，用来传递server

 app.ready=function(server){
  chat.prepareSocketIO(server);
};

module.exports = app;

进入bin/www,添加内容：

var server = http.createServer(app);

app.ready(server); //添加这句

3 客户端

网页配合socket.io,网页client.html置于public文件夹下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        table {
            width: 100%;
        }

        table.tool {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px;
        }

        #content {
            height: auto;
            padding: 10px;
            padding-bottom: 32px;
        }

        #content tr {
            margin-bottom: 10px;
        }
        #textContent {
            border: 1px solid grey;
            border-radius: 5px;
            padding: 6px;
        }

        .left {
            width: 88%;
        }

        #send {
            width: auto;
            padding: 2px 12px;
            line-height: 26px !important;
            border-radius: 5px;
            font-weight: bold;
            color: white;
            background-color: #ff4400;
        }

        tr.align-left td > span {
            float: left;
        }

        tr.align-left td > span span {
            display: inline-block;
        }

        tr.align-right td > span {
            float: right;
        }

        tr.align-right td > span span {
            display: inline-block;
        }

        span.msg {
            padding: 6px;
            background-color: #00B7FF;
            border: 1px solid #00B7ee;
            border-radius: 5px;
        }

        .timer {
            display: block;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <table id="content">
    </table>
</div>

<table class="tool">
    <tr>
        <td class="left">
            <div id="textContent" contenteditable="true" type="text"></div>
        </td>
        <td>
            <button id="send">发送</button>
        </td>
    </tr>
</table>
<script>
    var socket = io.connect('http://127.0.0.1:3000');
    var userName = "访客某某";
    socket.on('connect', function () {
        userName = prompt("请输入你的姓名?") || userName;
        socket.emit('join', userName);
    });
    socket.on('chat', function (user, data) {
        var p = document.createElement('tr');
        var direct = 'align-left';
        if (user === userName) {
            direct = 'align-right';
            p.innerHTML = '<td><span><span >' + data + '</span> <span>' + user + '</span></td><span></span>';
        } else {
            p.innerHTML = '<td><span> <span>' + user + '</span>   <span>' + data + '</span><span></span></td>';
        }
        p.className = direct;
        $('#content').appendChild(p);
    });

    $('#send').addEventListener('click', function (target) {
        var content = $('#textContent').innerHTML;
        if (content = content.replace(" ", "")) {
            socket.emit('sendMSG', content);
            $('#textContent').innerHTML = "";
        }
    });

    function $(flag) {
        return document.querySelector(flag);
    }
</script>

</body>
</html>

4 测试

www文件中默认端口号为3000

运行bin/www

cd bin
node www

或者在webstorm中右键Run 'bin/www'

接下来，使用浏览器开两个(+)标签访问 http://localhost:3000/client.html （如果测试局域网，将localhost替换为服务器的ip，下同）

首先分别输入用户，然后就可以输入文字进行聊天啦，其他的上线、消息提醒功能我删掉了，仅保留聊天。

放张效果图：

可能出现的问题：

网页加载socket.io 404

请不要修改script中的src ，如果不是用端口3000访问

如 http://localhost:63342/项目/public/client.html 请修改socket.io script的 src 为

<script src="http://localhost:3000/socket.io/socket.io.js"></script>

本例代码已经比较少了，嫌麻烦的话需要源码请Email ：gsiner@live.com;

转载请注明：https://www.snackblogs.com/articles/20

来源：oschina

链接：https://my.oschina.net/u/1388778/blog/529599

标签

Socket.IO

NodeJS

fabyuxuan

freddon