Socket.IO（聊天应用程序）

最新推荐文章于 2022-01-27 10:19:14 发布

良_123

最新推荐文章于 2022-01-27 10:19:14 发布

阅读量557

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/helloxiaoliang/article/details/73385395

版权

js 专栏收录该内容

106 篇文章 0 订阅

订阅专栏

最近周末无聊学习了下socket.io，做了个简单的聊天室，以下是关键代码文件：

html文件：

<!doctype html>
<html>
<head>
  <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%; }
    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; }
    #messages li { padding: 5px 10px; }
    #messages li:nth-child(odd) { background: #eee; }
    #messages { margin-bottom: 40px }
  </style>
</head>
<body>
<div id="login">
  输入昵称：
  <input type="text" value="" id="nick">
  <button οnclick="index()">确定</button>
</div>

<div id="index">
  <ul id="messages"></ul>
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
</div>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>

    $('#index').hide();
    function index() {
        localStorage.setItem('chatName',document.getElementById('nick').value);
        $('#login').hide();
        $('#index').show();
    }

    $(function () {
        var socket = io();
        $('form').submit(function(){
            socket.emit('chat message', localStorage.getItem('chatName')+'：'+$('#m').val());
            $('#m').val('');
            return false;
        });
        socket.on('chat message', function(msg){
            $('#messages').append($('<li>').text(msg));
            window.scrollTo(0, document.body.scrollHeight);
        });
    });
</script>
</body>
</html>

js文件：

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

app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});


io.on('connection', function(socket){
    socket.on('chat message', function(msg){
        io.emit('chat message', msg);
    });
});


http.listen(3000, function(){
    console.log('listening on *:3000');
});

仅有这两个文件是运行不起来的，详情GitHub源码

良_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Socket.IO（聊天应用程序）

最近周末无聊学习了下socket.io，做了个简单的聊天室，以下是关键代码文件：html文件：html>html>head> title>Socket.IO chattitle> style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, A
复制链接

扫一扫