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

来源：互联网发布：mac win系统截图快捷键编辑：程序博客网时间：2024/05/16 07:50

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') ;   }) ;

阅读全文

0 0