通过Websocket实现简单的实时聊天

通过Websocket实现简单的实时聊天(代码参考了黑马程序员)

在nodejs中安装依赖包websocket
输入npm install nodejs-websocket

服务端代码:

const ws = require('nodejs-websocket');

//记录连接上来的总用户数量
let count = 0;

//每个连接到服务器的用户,都会有一个conn
const server = ws.createServer(conn => {
     
    console.log('新的连接');
    count++;
    conn.userName = `用户${
       count}`;
    //告诉所有用户,有人加入了聊天室
    broadcast(`${
       conn.userName}进入了聊天室`);

    //接收到了浏览器的数据
    conn.on('text', data => {
     
        //当我们接收到某个用户的信息时,告诉所有用户,发送的信息内容是什么
        broadcast(data);
    });

    //关闭连接的时候触发
    conn.on('close', data => {
     
        console.log('关闭连接');
        count--;
        //告诉所有用户有人离开了聊天室
        broadcast(`${
       conn.userName}离开了聊天室`);
    });

    //发生异常时触发
    conn.on('error', data => {
     
        console.log('发生异常');
    })

})

//广播,给所有的用户发消息
function broadcast(msg) {
     
    //server.connections表示所有用户
    server.connections.forEach(item => {
     
        item.send(msg);
    })
}

server.listen('3000', () => {
     
    console.log('监听端口3000');
})

客户端代码:


<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>Documenttitle>
head>

<body>
    <input type="text">
    <button>发送请求button>
    <div>div>

    <script>
        var input = document.querySelector('input');
        var button = document.querySelector('button');
        var div = document.querySelector('div');

        //参数1:websocket的服务地址
        var socket = new WebSocket('ws://localhost:3000');

        //open,当websocket连接成功时触发
        socket.addEventListener('open', function() {
      
            div.innerHTML = '连接服务成功'
        });

        //主动给websocket发送信息
        button.addEventListener('click', function() {
      
            var value = input.value;
            socket.send(value);
        })

        //接收websocket服务的数据
        socket.addEventListener('message', function(e) {
      
            console.log(e.data);
            var dv = document.createElement('div');
            dv.innerHTML = e.data;
            div.appendChild(dv);
        })
    script>
body>

html>

效果图:
通过Websocket实现简单的实时聊天_第1张图片
通过Websocket实现简单的实时聊天_第2张图片

这只是在本地服务器上进行实时聊天,要想在公网上和朋友进行聊天,可以使用内网穿透

把内网地址和端口挂上内网穿透
通过Websocket实现简单的实时聊天_第3张图片

把项目文件夹挂上内网穿透
通过Websocket实现简单的实时聊天_第4张图片

此时,客户端的代码要更改一下请求地址,改成内网地址在内网穿透中生成的地址

  //参数1:websocket的服务地址
        var socket = new WebSocket('ws://dnfljyx.cn.utools.club');

效果图:
输入网址即可,在手机浏览器里输入也行,这样就可以和小伙伴们聊天了!
通过Websocket实现简单的实时聊天_第5张图片
通过Websocket实现简单的实时聊天_第6张图片

你可能感兴趣的:(笔记)