Node.js socket.io前端后端通讯简单例子

最新推荐文章于 2024-07-10 00:31:30 发布

Cyan1614

最新推荐文章于 2024-07-10 00:31:30 发布

阅读量2.1k

点赞数

分类专栏： socket 文章标签： socket

本文链接：https://blog.csdn.net/Cyan1614/article/details/73692631

版权

socket 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文提供了一个简单的Node.js和socket.io结合的示例，介绍如何实现前端与后端的实时通信。通过在Node.js服务器上设置socket.io实例，并在前端创建连接，实现了双向的数据传递。这对于构建实时应用，如聊天室、在线游戏等场景非常有用。

摘要由CSDN通过智能技术生成

前端代码：

<!doctype html>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        #box {
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <ul id="message-box"></ul>
    <div id="box">
        <input id="edit-box" autocomplete="off" /><button id="btn">Send</button>
    </div>

    <script src="socket.io.js"></script>
    <script>
        var socket = io();
        document.getElementById('btn').onclick = function () {
            socket.emit('message', document.getElementById('edit-box').value);
            document.getElementById('edit-box').value = '';
        };
        socket.on('message', function (message) {
            var li = document.createElement('li');
            li.innerHTML = message;
            document.getElementById('message-box').appendChild(li);
        });
    </script>
</body>

</html>

后端代码：

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var path = require('path');
app.use(express.static(__dirname));
app.get('/', function (request, response) {
    response.sendFile(path.join(__dirname, 'index.html'));
});

io.on('connection', function (socket) {
    console.log('a user connected');
    socket.on('disconnect', function () {
        console.log('user disconnected');
    });
    socket.on('message', function (message) {
        console.log('message: ' + message);
        io.emit('message', message);
    });
});

var server = http.listen(4000, function () {
    console.log('Sever is running');
});