socket.io创建聊天室

最新推荐文章于 2023-07-21 19:57:45 发布

qq453627768

最新推荐文章于 2023-07-21 19:57:45 发布

阅读量362

点赞数

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

本文链接：https://blog.csdn.net/qq453627768/article/details/88264181

版权

socket.io 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

因为以后项目需要用到 socket.io ，所以今天就研究了一番，写个博客跟大家分享下。
1.先创建一个文件夹socket-example，然后用终端在里面npm init（需要安装nodejs），之后package.json里面如下：
在这里插入图片描述
2.然后这里我们使用express来当做web框架

npm init --save express

下载完express之后，我们在socket-example文件夹中新建一个index.js，里面写上：

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

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

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

因为我们指定的为/路径下是跳转到index.html，所以我们还需要在socket-example文件夹中新建一个index.html，里面写上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sockie-exmple</title>
</head>
<body>
    Hello World
</body>
</html>

这时候我们在终端输入node index.js
然后我们打开localhost:3001就会看到：
在这里插入图片描述
这时候我们先在当前index.html页面把聊天室的样式写好：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sockie-exmple</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        form{
            width: 100%;
            position: fixed;
            bottom: 20px;
            left: 0;
        }
        #messageVal{
            height: 30px;
            width: 80%;
            margin:0 20px;
        }
        form>button{
            width: 50px;
            height: 30px;
        }
        #chat-message{
            padding: 0 100px;
        }
        #chat-message>li{
            font-size: 30px;
            font-family: '微软雅黑'
        }
    </style>
</head>
<body>
    <ul id="chat-message"></ul>
    <form action="">
        <input type="text" id="messageVal"><button>发送</button>
    </form>
</body>
</html>

3.我们此时开始集成socket.io，建立实时连接。

npm install --save socket.io

我们在index.html中引入socket.io，引入后的index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sockie-exmple</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        form{
            width: 100%;
            position: fixed;
            bottom: 20px;
            left: 0;
        }
        #messageVal{
            height: 30px;
            width: 80%;
            margin:0 20px;
        }
        form>button{
            width: 50px;
            height: 30px;
        }
        #chat-message{
            padding: 0 100px;
        }
        #chat-message>li{
            font-size: 30px;
            font-family: '微软雅黑'
        }
    </style>
</head>
<body>
    <ul id="chat-message"></ul>
    <form action="">
        <input type="text" id="messageVal"><button>发送</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
        var socket=io();
        var name='abc'+Math.floor(Math.random()*10);
        $('form').submit(function(){
            if($('#messageVal').val()!=''){
                socket.emit('chat message',{name:name,val:$('#messageVal').val()});
                $('#messageVal').val('');
            }
            return false
        });
    </script>
</body>
</html>

这样的意思是在input框的值不为空的时候，使用socket.emit()方法定义一个chat message方法，将name和val传过去。
然后此时，我们开始在index.js里面集成socket.io，将index.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){
	//连接时
    console.log('a user connected');
    socket.on('disconnect',function(){
    	//断开连接时
        console.log('user disconnected')
    });
    socket.on('chat message',function(msg){
    	//在input框不为空提交触发chat message事件时
        console.log('聊天数据为：'+msg.val)
    })
})

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

这个时候，我们在终端输入node index.js，刷新页面在输入框中输入111然后发送，看下终端打印的数据
在这里插入图片描述
这时候我们可以收到客户端发送的消息，这时候我们要做的，只是将接到的消息广播出去，让连了当前端口的用户接受到消息就可以了，这要怎么实现呢？我们可以在index.js中接到消息时，通过io.emit()方法将消息广播出去，让收到广播的用户在页面上面显示就可以了。具体如下：

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){
    console.log('a user connected');
    socket.on('disconnect',function(){
        console.log('user disconnected')
    });
    socket.on('chat message',function(msg){
        console.log('聊天数据为：'+msg.val)
        
        //在此处将信息广播出去
        io.emit('chat message',msg);
    })
})

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

然后我们在index.html中接受信息并显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sockie-exmple</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        form{
            width: 100%;
            position: fixed;
            bottom: 20px;
            left: 0;
        }
        #messageVal{
            height: 30px;
            width: 80%;
            margin:0 20px;
        }
        form>button{
            width: 50px;
            height: 30px;
        }
        #chat-message{
            padding: 0 100px;
        }
        #chat-message>li{
            font-size: 30px;
            font-family: '微软雅黑'
        }
    </style>
</head>
<body>
    <ul id="chat-message"></ul>
    <form action="">
        <input type="text" id="messageVal"><button>发送</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
        var socket=io();
        var name='abc'+Math.floor(Math.random()*10);
        $('form').submit(function(){
            if($('#messageVal').val()!=''){
                socket.emit('chat message',{name:name,val:$('#messageVal').val()});
                $('#messageVal').val('');
            }
            return false
        });
        //在此处接受信息并显示
        socket.on('chat message',function (param) {
            console.log(param)
            $('#chat-message').append(`<li><b>${param.name}</b>说：<span>${param.val}</span></li>`)
        })
    </script>
</body>
</html>

这个时候我们重新node index.js和刷新页面，用两台设备进入当前ip:3001下验证下：
在这里插入图片描述
这样就实现了一个简单的聊天室了。可能我说的还是不够清晰，因为我是在w3c上面学的，所以我也附上他的地址，要是没看懂的可以去看下，相信看一下就能懂了。
https://www.w3cschool.cn/socket/socket-ulbj2eii.html

qq453627768

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
socket.io创建聊天室

因为以后项目需要用到 socket.io ，所以今天就研究了一番，写个博客跟大家分享下。1.先创建一个文件夹socket-example，然后用终端在里面npm init（需要安装nodejs），之后package.json里面如下：2.然后这里我们使用express来当做web框架npm init --save express 下载完express之后，我们在socket-examp...
复制链接

扫一扫