socket.io+node即时通讯

来源：互联网发布：苏州seo 编辑：程序博客网时间：2024/05/16 17:08

实现的一个简洁的即时通讯，功能大致有某某某进入群聊，某某某退出群聊以及显示发布消息的时间等等。纯粹练手项目

html代码

<!doctype html><html>  <head>        <meta charset="UTF-8">    <title>Socket.IO chat</title>    <style>      * { margin: 0; padding: 0; box-sizing: border-box; }      body { font: 13px Helvetica, Arial; }      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; height: 45px;}      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }      #messages { list-style-type: none; margin: 0; padding: 0; margin-bottom: 45px;}      #messages li { padding: 5px 10px; }      #messages li:nth-child(odd) { background: #eee; }    </style>  </head>  <body>    <div id="register" onclick="register">        <input id="inp" autocomplete="off" />        <button>进入聊天室</button>    </div>    <div id="chat" style="display: none;">        <ul id="messages"></ul>        <form action="">          <input id="m" autocomplete="off" />          <button>Send</button>        </form>    </div>  </body>  <script src="/socket.io/socket.io.js"></script>  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>  <script>    $(function () {        var name = ''        var socket = io('http://192.168.2.183:8080');        $('#register button').on('click',function(){            if($('#inp').val()){                name = $('#inp').val();                $('#register').hide();                $('#chat').show();                //发送昵称给服务器                socket.emit('my other event', {name:name});            }            else{                alert('请输入昵称')            }        });        //用户连接时触发      socket.on('news', function (data) {        $('#messages').append($('<li>').text(data + '加入群聊 '));      });        //发送数据给服务器      $('form').submit(function(){        socket.emit('chat message', {val:$('#m').val(),name:name});        $('#m').val('');        return false;      });        //显示聊天信息      socket.on('chat', function(msg){        $('#messages').append($('<li>').text(msg.name+'  '+msg.time));        $('#messages').append($('<li>').text(msg.msg));      });      //用户离开      socket.on('leave',function(msg){        $('#messages').append($('<li>').text(msg + '退出群聊 '));    })    });  </script></html>

node代码
- 使用npm i 安装所依赖的包
- node app.js 启动项目

var fs = require('fs');var app = require('http').createServer(handler)var io = require('socket.io')(app);var format = require('./formatTime.js')function handler (req, res) {  fs.readFile(__dirname + '/index.html', function (err, data) {    if (err) {      res.writeHead(500);      return res.end('Error loading index.html');    }    res.writeHead(200);    res.end(data);  });}app.listen(8080, function(err, res) {  if(err)    console.log('err:'+err);  else    console.log('server is listening on port 8080');});io.on('connection', function (socket) {  socket.on('my other event', function (data) {    socket.name = data.name;    io.emit('news', data.name);  });  socket.on('chat message', function(msg){    io.sockets.emit('chat', {msg:msg.val,name:msg.name,time:format.formatter(new Date(),'hh:mm:ss')});  });  //断开连接时触发  socket.on('disconnect', function (data) {        io.sockets.emit('leave', socket.name);    });});

另外也封装了一个转换时间的函数

exports.formatter = function (date, formatString) {    if (!(date instanceof Date)) {        date = new Date(date);    }    formatString || (formatString = 'YY/MM/DD hh:mm:ss');    var dateValue = {        Y : date.getFullYear().toString().slice(-2),        YY : date.getFullYear(),        M : date.getMonth() + 1,        MM : ('0' + (date.getMonth() + 1)).slice(-2),        D : date.getDate(),        DD : ('0' + date.getDate()).slice(-2),        h : date.getHours(),        hh : ('0' + date.getHours()).slice(-2),        m : date.getMinutes(),        mm : ('0' + date.getMinutes()).slice(-2),        s : date.getSeconds() + 1,        ss : ('0' + date.getSeconds()).slice(-2)    };    return formatString.replace(/((?:Y|M|D|h|m|s){1,2})/g, function ($0, $1) {        return dateValue[$1];    });};

阅读全文

0 0