socket.io的使用之简单聊天室案例

最新推荐文章于 2024-07-19 11:05:45 发布

宇智波幽助

最新推荐文章于 2024-07-19 11:05:45 发布

阅读量732

点赞数

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

本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/78697012

版权

socket 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、客户端【index.html】代码：

<body>
    <h3>socket简例</h3>
    <hr>
    <div id = 'app'>
        <div>
            <div>
                <ul>
                    <li v-for = 'item in msgs'>
                        {{item.name}}说：{{item.content}}
                    </li>
                </ul>
            </div>
            <div>
                <p><input type="text" v-model = 'msg'><button @click = 'm_send()'>发送</button></p>
            </div>
        </div>
    </div>

    <script type="text/javascript" src = 'https://cdn.bootcss.com/vue/2.5.9/vue.min.js'></script>
    <script type="text/javascript" src = 'https://cdn.bootcss.com/socket.io/1.7.3/socket.io.min.js'></script>
    <script type="text/javascript">

        var _vm = new Vue({
            data :　{
                name : '用户',
                msg : '',
                msgs : [],
            },
            methods : {
                m_send : function() {

                    // 向客户端发送消息
                    socket_client.emit('say_client', {
                        name : this.name,
                        content : this.msg
                    }) ;
                    this.msg = '' ;
                }
            }
        }).$mount('#app') ;


        // socket服务器
        var socket_client = io.connect('http://127.0.0.1:3000') ; 

        /**
         *  监听服务端发来的消息
         *
         *  1、“say_server”是客户端发出信息时的key值
         *  2、“res”是客户端传来的value值
         */ 
        socket_client.on('say_server' ,function(res){

            console.log('服务端发来的消息为：', res) ;

            _vm.msgs.push(res);
        });

    </script>
</body>

2、服务端【app.js】代码：

const http = require('http') ;
const server = http.createServer() ;

// web服务器
const express = require('express') ;
const app = express();

app.use(express.static(__dirname + '/public'));

app.listen(8888, function () {
    console.log('web服务器成功启动了，IP：127.0.0.1，端口号：8888') ;
});


// socket服务器

const socketio = require('socket.io') ;
const socket_server = socketio(server) ;

// 建立和客户端的socket连接
socket_server.on('connection', function(client) {

// console.log(client) ;                    // 查看连接进来的客户端对象内容   
// console.log(Object.keys(client)) ;       // 查看连接进来的客户端对象的关键key值

    /**
     *  监听客户端发来的消息
     *
     *  1、“say_client”是客户端发出信息时的key值
     *  2、“res”是客户端传来的value值
     */ 
    client.on('say_client', function(res) {
        console.log('客户端发来的消息为：', res) ;

        // 向客户端发送消息
        socket_server.emit('say_server', res) ;
    }) ;
}) ;


server.listen(3000, function() {
    console.log('socket服务器成功启动了，IP：127.0.0.1，端口号：3000') ;   
}) ;