【小河今学 | webSocket】一个简单的聊天室实现

最新推荐文章于 2024-02-10 13:29:26 发布

LB_laber

最新推荐文章于 2024-02-10 13:29:26 发布

阅读量909

点赞数

分类专栏：小河今学文章标签： websocket 网络协议网络

本文链接：https://blog.csdn.net/LB_laber/article/details/127069841

版权

小河今学专栏收录该内容

27 篇文章 3 订阅

订阅专栏

文章目录

前言
一、websocket是什么？
二、实现步骤
- 1.创建项目框架
- 2.运行结果

前言

在实现聊天室之前，我们需要先简单了解websocket是什么？为什么要用到websocket实现聊天室功能？

一、websocket是什么？

websocket是一种全双工通信的协议。全双工通信即允许数据在两个方向上同时传输，当A➡B的同时B➡A。
而websocket的全双工具体是体现在了客户端和服务端的双向交流上。
这里用轮询来举例说明：轮询是在特定的的时间间隔（如每1秒），由客户端对服务端发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。也就是说如果没有客户端向服务端发送请求，服务端不会主动向客户端提供新的数据。

而websocket的全双工就体现在这里，只要客户端向服务端发送一次请求，之后有任何的数据改变服务端都会主动向客户端提供。

因此我们用到websocket来实现聊天室功能。

二、实现步骤

1.创建项目框架

首先创建一个文件夹，命名chat-room（可以不取这个名字）
进入到文件夹中，打开cmd，生成package.json并安装websocket。

npm init -y
npm i socket.io --save

在这里插入图片描述
最后生成文件夹内如下所示

接着创建websocket服务端，命名为server.js，代码如下：

var http = require('http');
var fs = require('fs');
var ws = require('socket.io');  // 引入socket.io

// 创建一个HTTP服务器
// req 请求对象
// res 响应对象，收到请求之后作出响应
var server = http.createServer(function(req,res){   
    var html = fs.readFileSync('./client.html');    // 通过fs同步读取文件client.html,client.html是发送给客户端的文件
    res.end(html);  // 将文件返回给客户端
}).listen(8080);

var io = ws(server);    // http服务器与ws服务相关联，返回io服务实例

// 监听用户的连接事件，即当用户连接服务器时
io.on('connection',(socket)=>{
    // 用户连接io服务器时输出‘有新用户进入房间’
    console.log('有新用户进入房间');
    // 当有用户发送消息时，接收该消息
    socket.on('message',(obj)=>{
        // 输出该消息（可以不要，这里只是为了方便查看）
        console.log(obj);
        // 将接收到的消息发送给所有客户端
        io.emit('message',obj);
    })
})

接着创建传送给客户端的文件client.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
</head>
<body>
    <h2>聊天室</h2>
    <textarea id="text" cols="30" rows="10"></textarea>
    <button id="btn">发送</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.2/socket.io.js"></script>
    <script>
        var socket = io.connect('/');   // 连接io服务器
        var text = document.getElementById('text');
        var btn = document.getElementById('btn');
        var myMessage = '';

        // 点击发送按钮
        btn.onclick = function(){
            var mes = text.value;   // 获得输入的消息
            myMessage = mes;
            socket.send(mes);   // 把消息发送到服务器
            text.value = '';    // 清空文本框
        }

        // 当服务器广播消息时，触发message事件，消息内容在回调函数中
        socket.on('message',(mes)=>{
            var p = document.createElement('p');
            p.innerText = mes;
            if(myMessage == mes){   // 如果是自己发送的消息接收到，则将自己发送的消息颜色改为红色，往右偏移
                p.style.cssText = 'color:red;margin-left:200px';
            }
            document.body.appendChild(p);
        })
    </script>
</body>
</html>