websocket 聊天室

作者: Augenstern___ | 来源:发表于2018-06-04 09:55 被阅读0次

websocket使用
Websocket 详解及聊天室实例
2019-01-31
基于SpringBoot、STOMP使用WebSocket实现聊
Netty + websocket聊天室
Spring和WebSocket整合并建立简单的Web聊天室
websocket端的实现
简易的聊天室/原生webSocket详情/数据帧
Netty4（十一）：实现 WebSocket 聊天室
WebRTC在线聊天室

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
    *{
        margin:0;
        padding:0;
    }
    .wrap{
        width:100%;
    }
    #login{
        width:100%;
        height:790px;
        background:darkorange;
        border:1px solid darkorange;
    }
    #login>p:nth-of-type(1){
        width:100%;
        color:ghostwhite;
        font-size:40px;
        text-align:center;
        font-weight:600;
        margin-top:20px;
    }
    #login>p:nth-of-type(2)>input{
        width:65%;
        height:50px;
        border:none;
        outline:none;
        font-size:18px;
        text-indent:1em;
        margin-left:50px;
        margin-top:30px;
    }
    #login>p:nth-of-type(2)>button{
        width:20%;
        height:50px;
        border:none;
        outline:none;
        color:white;
        font-size:18px;
    }
    #chat{
        width:100%;
        height:790px;
        background:darkorange;
        border:1px solid darkorange;
        display:none;
    }
    #chat>p{
        width:100%;
        color:ghostwhite;
        font-size:40px;
        text-align:center;
        font-weight:600;
        margin-top:20px;
    }
    .chathouse{
        width:70%;
        height:600px;
        margin:0 auto;
        background:ghostwhite;
        margin-top:20px;
    }
    .receive{
        width:75%;
        margin:0 auto;
        height:100px;
        display:flex;
        justify-content: space-around;
        align-items: center;
    }
    .receive>input{
        width:65%;
        height:50px;
        border:none;
        outline:none;
        font-size:18px;
        text-indent:1em;
    }
    .receive>button{
        width:20%;
        height:50px;
        border:none;
        outline:none;
        color:white;
        font-size:18px;
    }
    .chathouse{
        overflow: hidden;
    }
    .sys{
        width:100%;
        height:50px;
        display:flex;
        align-items:center;
    }
    .sys>p{
        width:30%;
        height:23px;
        text-align:center;
        line-height:23px;
        background:lightgray;
        color:white;
        font-size:17px;
        margin:0 auto;
        border-radius:4px;
    }
    .chatcontent{
        overflow: hidden;
    }
    .chatcontent>.username{
        height:35px;
        line-height:35px;
        color:gray;
        text-indent:1em;
    }
    .chatcontent>.content{
        height:35px;
        text-align:center;
        line-height:35px;
        color:white;
        margin-top:10px;
    }
    .left{
        float:left;
        margin-left:10px;
        clear:both;
    }
    .left .content{
        background:white;
        color:black;
    }
    .right{
        float:right;
        margin-right:10px;
        clear:both;
    }
    .right .content{
        background:lawngreen;
    }
</style>
</head>
<body>
<div class="wrap">
    <div id="login">
    <p>进入聊天室</p>
    <p>
        <input type="text" placeholder="请输入昵称" id="textin"><button id="in">进入</button>
    </p>
</div>
<div id="chat">
    <p>聊天室</p>
    <div class="chathouse">
        <div class="sys">
            <p>小宝上线啦</p>
        </div>
        <div class="chatcontent left">
            <p class="username">小宝</p>
            <p class="content">你好</p>
        </div>
        <div class="chatcontent right">
            <p class="username">小宝</p>
            <p class="content">你好</p>
        </div>
    </div>
    <div class="receive">
        <input type="text" id="chatContent"><button id="receive">发送</button>
    </div>
</div>
</div>
</body>
<script>
let userInfo = {
    'userName':'',
    'content':'',
    'isSys':0
}
$('#in').click(function(){
//获取用户名 并赋值给对象
userInfo.userName = $('#textin').val()
if (userInfo.userName == '') {
    alert('昵称不能为空！');
    return false;
}
$('#login').hide();
$('#chat').show();
//建立连接,发送消息
let socket = new WebSocket('ws://127.0.0.1:2347');
// 打开socket应用，同时发送一条用户一上线广播
socket.onopen = function () {
    userInfo.isSys = 1; // 是系统消息
    socket.send(JSON.stringify(userInfo)); // send()只能发送字符串  此处传入一个对象
};
//处理接收到的消息
socket.onmessage = function(event){
    //消息内容在event下 ==> data下
    // console.log(event);
    let data = JSON.parse(event.data);
    // console.log(data);
    //如果是系统消息
    if(data.isSys){
        $('.chathouse').append(`<div class="sys"><p>${data.userName}上线啦</p></div>`);//系统提示：用户上线
          //如果本地对象中的名字 !== ws里传入的名字  就让他居左
    }else if(userInfo.userName !== data.userName){
        $('.chathouse').append(`<div class="chatcontent left">
            <p class="username">${data.userName}</p>
            <p class="content">${data.content}</p>
        </div>`);
    }


}
//发送聊天内容
$('#receive').click(function(){
    userInfo.isSys = 0; //发布的聊天内容时将isSys设置为0==》非系统消息
    //获取输入内容 并赋值
    userInfo.content = $('#chatContent').val();
    /*
        *
        * 提升用户体验（网络延时）：
        *   自己发布的内容立即显示出来不走网络
        *   对方看到的内容可能会延迟，但是对于对方来说都是即时获取到的因为他不知道你什么时候发送出去的
        * */
    $('.chathouse').append(`<div class="chatcontent right">
            <p class="username">${userInfo.userName}</p>
            <p class="content">${userInfo.content}</p>
        </div>`)
    //发送完成清空
    $('#chatContent').val('');
    socket.send(JSON.stringify(userInfo)); //发送
})
})
</script>
</html>