websocket 聊天室(及时通讯)

维克多噗噗

于 2017-06-09 17:18:24 发布

阅读量434

点赞数

分类专栏： websocket聊天室 node

node 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

websocket聊天室

0 篇文章 0 订阅

订阅专栏

websocket

服务器   <===>   浏览器    双向 及时通讯
ws传输

引入模块socket.io

{
    "name":"node02",
    "version":"0.0.1",
    "dependencies":{
        "express":"latest",
        "ejs":"latest",
        "mysql":"latest",
        "body-parser":"latest",
        "cookie-parser":"latest",
        "express-session":"latest",
        "multer":"latest",
        "socket.io":"latest"
    }
}

公共public引用socket.io.js
这里写图片描述

基本双向传输

app.js

const http = require('http'),
    express = require('express'),
    app = express(),
    ws = require('socket.io');

let server = http.createServer(app).listen(123);


// 创建服务器连接  监听服务:123
let io = ws(server);

// 创建连接
io.on('connection',(socket)=>{  //每个页面 socket是独立的一个.
    // emit()发送消息的方法 1.发送的名称 2.内容
    io.emit("name",{my:'狗蛋'});

    // 互相监听 on() 监听 1.信号('名字') 2.回调 (data)=>{}带对方发送的数据
    socket.on('you',(data)=>{
        console.log(data);//{you:"二狗"}
        // 发送消息的用户名
        data.name = socket.name;
        // 信息广播出去
        io.emit('send',data);
    })
})

chat.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
    </style>
</head>
<body>
    <div></div>
    <input type="text" name="msg">
    <button onclick="submit()" >发送</button>

    <script src='socket.io.js'></script>
    <script type="text/javascript">

        let box = document.getElementsByTagName('div')[0],


        //开始连接
        let socket = io.connect('/');
        // 监听服务器发过来 名字
        socket.on('name',(data)=>{
            console.log(data); //{my:'狗蛋'}
            // 发送信息
            socket.emit('you',{you:"二狗"})
        })
    </script>
</body>
</html>

每个页面 socket是独立的一个.

用户加入

用户退出

用户发送消息

用户列表

用户信息保存

disconnect 监听页面刷新 退出连接 触发的事件

每个页面 socket是独立的一个.可以保存用户信息

on('信号',回调(接受数据))监听 

emit('信号',回调(发送数据))发送

浏览器. io.connet('/')开始连接.
服务器  io.on('connnetion',socket=>{
            //监听页面
        })

app.js

const http = require('http'),
    express = require('express'),
    app = express(),
    ws = require('socket.io');

let server = http.createServer(app).listen(123);



// 创建服务器连接  监听服务:123
let io = ws(server);
let userList = {};//用户列表
// 创建连接
io.on('connection',(socket)=>{  //每个页面 socket是独立的一个.
    // io.emit()发送消息的方法 1.发送的名称 2.内容
    io.emit("name",{my:'狗蛋'});
    // 监听信号'you'
    /*socket.on('you',(data)=>{
        console.log(data);
    })*/
    // 用户加入
    socket.on('login',(data)=>{
        // 保存用户信息
        userList[data.userId] = data.name;
        // 退出时. 好判断是谁退出,每个页面 socket是独立的一个.
        // 保存userId name  退出的时候好删除用户  发送消息可以知道谁发的
        socket.userId = data.userId;
        socket.name = data.name;
        // 几个用户
        data.num = jsonLength(userList);
        data.list = userList;
        console.log(data);
        // 用户加入信息广播出去
        io.emit('login',data);
    });
    // disconnect 监听页面刷新 退出连接 触发的事件
    socket.on('disconnect',()=>{
        console.log("当前退出的用户是"+socket.name);
        delete userList[socket.userId];
        // 用户退出信息广播出去
        io.emit('out',{name:socket.name,num:jsonLength(userList),list:userList});
    })
    // 消息机制
    socket.on('msg',(data)=>{
        console.log(data);
        // 发送消息的用户名
        data.name = socket.name;
        // 信息广播出去
        io.emit('send',data);
    })
})
// 输出json 的长度
function jsonLength(obj){
    var userlength = 0;
    for(var i in obj){
        userlength++;
    }
    return userlength;
}

localhost:123/chat.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
    </style>
</head>
<body>
<label for="username">名字:</label>
    <input type="text" class='name' id="username"> <button onclick="jion()">加入</button>
    <div></div>
    <div></div>
    <input type="text" name="msg">
    <button onclick="submit()" >发送</button>
    <div></div>
    <script src='socket.io.js'></script>
    <script type="text/javascript">

        let box = document.getElementsByTagName('div')[0],
            num = document.getElementsByTagName('div')[1];
            list = document.getElementsByTagName('div')[2];
        // 创建连接
        let socket,
            name,
            userId;

        //当用户进入聊天室 才开始连接.
        function jion(){ //加入
            name = document.querySelector('.name').value;
            init(name);
        }

        // 开始连接
        function init(username){
            userId = Date.now();
            socket = io.connect('/');
            socket.emit('login',{name:username,userId:userId});
            // 用户加入
            socket.on('login',(data)=>{
                box.innerHTML += `${data['name']}加入了聊天室</br>`;
                num.innerHTML = `当前在线人数${data['num']}</br>`;
                list.innerHTML = '用户列表:</br>';
                for(var i in data.list){
                    list.innerHTML += `${data.list[i]}</br>`;
                }
            })
            // 用户退出
            socket.on('out',(data)=>{
                box.innerHTML += `${data['name']}退出了聊天室</br>`;
                num.innerHTML = `当前在线人数${data['num']}</br>`;
                list.innerHTML = '用户列表:</br>';
                for(var i in data.list){
                    list.innerHTML += `${data.list[i]}</br>`;
                }
            })
            // 用户发送消息
            socket.on('send',(data)=>{
                box.innerHTML += `${data['name']}:${data['content']}</br>`;
            })
        }

        function submit(){
            let txt = document.getElementsByTagName("input")[1].value;
            socket.emit('msg',{content:txt});
        }

    </script>
</body>
</html>

这里写图片描述

维克多噗噗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
websocket 聊天室(及时通讯)

websocket服务器 <===> 浏览器双向及时通讯ws传输引入模块socket.io{ "name":"node02", "version":"0.0.1", "dependencies":{ "express":"latest", "ejs":"latest", "mysql":"latest",
复制链接

扫一扫