编写聊天应用程序

MGQDLY

于 2020-06-28 17:44:26 发布

阅读量382

点赞数

分类专栏： socket.io 前端文章标签： javascript jquery socket

本文链接：https://blog.csdn.net/MGQDLY/article/details/107004716

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

socket.io

1 篇文章 0 订阅

订阅专栏

socket .io编写聊天应用程序

创建文件

搭建框架

npm i socket.io -S
npm init -y
express -e
npm i

一，在bin/www中引入

var socket = require('../socket')

核心代码，先require一个io,把server放进来
//创建一个服务器（server），并将app作为监听对象,app就是一个function (req, res) {}

var server = http.createServer(app)；
var io = require('socket')(server）
 socket(io)

二，将node_modules/socket.io-client/dist/socket.io.js和socket.io.js.map复制到public/javascripts中

三，在public中创建index.html文件

<!doctype html>
<html>
<head>
    <title>Socket.IO chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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: 0.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;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="./javascripts/socket.io.js"></script>
</head>

<body>
    <ul id="messages"></ul>
    <form action="">
        <input type="text" id="username" name="username" value="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script>
        $(function () {
            var socket = io();//Socket.io客户端对象
            $('form').submit(function (e) {//submit提交到服务器
                //console.log('1'+e)
                e.preventDefault();//阻止表单默认提交事件，如果去掉第一次发送两次
            //io.emit自命名
                socket.emit('chat message', {//发送数据，发送一个chat message命令和数据
                    username: $('#username').val(),//#username的属性值去掉中间包含的空格bai全部去掉之后再赋值给duuserName
                    message: $('#m').val()
                });
                $('#m').val('');//如果返回的值为空。returb
                return false;
            });
            //on监听事件，事件名需要一致
            socket.on('chat message', (msg) => {//回调函数执行完后取消监听
                $('#messages').append($('<li>').text(msg));
            })
        });

     
    </script>
</body>

</html>

四，创建socket.js

module.exports=(io)=>{
    io.on('connection',(socket)=>{
        socket.on('chat message',(msg)=>{
            socket.emit('chat message', msg.username + '说：' + msg.message);
        })
    })
}

启动

npm run start

最终结果

在这里插入图片描述

MGQDLY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
编写聊天应用程序

socket .io编写聊天应用程序创建文件搭建框架npm i socket.io -Snpm init -yexpress -enpm i一，在bin/www中引入var socket = require('../socket')核心代码，先require一个io,把server放进来//创建一个服务器（server），并将app作为监听对象,app就是一个function (req, res) {}var server = http.createServer(app)；var
复制链接

扫一扫

专栏目录