从webSocket到实现实时聊天

一，webSocket的介绍

什么是webSocket？

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

WebSocket 协议本质上是一个基于 TCP 的协议。

为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

 

webSocket的原理图

                                 

 

webSocket的基本使用

 客户端：

    //建立连接 
    const ws = new webScoket('ws://localhost:9999')
    //监听关闭
    ws.onclose = ()=>{
        console.log(客户端关闭连接")
    }
    
    //发送数据
    btn.onclick = function(){
        ws.send(msg.value)
    }

    //接收服务器返回的数据
    ws.onmessage = (remsg) =>{
        console.log(remsg.data)
    }

    服务端 - node.js - app.js

       //引入依赖
      const ws = require('nodejs-websocket');

      //建立连接
      const wserver = ws.createServer(websocket=>{

         // 错误处理
         websocket.on('err',err=> {
             if(err) throw err
         })

          // 关闭连接
         websocket.on('close',()=> {
             console.log("服务器连接已经关闭")
         })

          // 错误处理
         websocket.on('err',err=> {
             if(err) throw err
         })

         接收客户端发送数据
         websocket.on('text',msg=>{
             console.log(msg)

             //返回给客户端
             websocket.sendText()
         })
      })


      wserver.listen(9999)

      console.log('服务器建立连接成功')

//发送信息
socket.emit('自定义事件',发送数据)

//接收信息
socket.on('自定义事件',(data)=>{
//data - 接收到的数据
})

//广播数据
io.sockets.emit('自定义事件',广播数据)

 

 

如何通过webSocket实现多人实时聊天？

   效果图

          

 

  对于一个不会java的孩子，聊天的后端实现是基于node.js的

  聊天功能的实现主要是依赖于webSocket与服务器建立连接后，服务器端接受信息，主动推送客服端，客服端接收信息进行页面的展示

    前端由于是直接利用jquery写的，所以引入了Socket.io.js

 

Socket.io是什么？

  Socket.io是一个完全由JavaScript实现、基于Node.js、支持WebSocket的协议用于实时通信、跨平台的开源框架，它包括了客     户端的JavaScript和服务器端的Node.js。经常用于在线聊天室、在线客服系统、评论系统等

　Socket.io中主要使用了websocket，将轮询作为其辅助选项，提供的是相同的接口。其与node.js一样，也是事件驱动的。

 

前端实现步骤

    大致先简单写一下样式后开始进行js逻辑部分，如果是在框架中使用，下载

npm install socketio  --save-dev

  js部分

$(function () {

    // 连接服务器
    const socket = io('ws://localhost:8888');

    let name
    //绑定登录事件
    $("#login-btn").click(function () {
        var username = $('#user-name').val();
        //将登陆名发送后端
        socket.emit('login', username)
    })

    //监听登录失败
    socket.on('loginFail', username => {
        alert('登录失败,用户名已经存在')
    })

    //监听登陆成功
    socket.on('loginS', username => {
        //登录成功,显示聊天界面
        $('.login-wrap').hide();
        $('.chat-wrap').show();

        name = username
    })


    //发送信息
    $('.sendBtn').click(function () {
        //获取当前输入值
        let talks = $('.msg').val();

        if (!talks) {
            alert('输入不能为空')
        } else {
            //发送信息给服务器
            socket.emit('talks', { talks, name });
            //清空信息
            $('.msg').val('');
        }

    })

    //接收数据
    socket.on('allTalks', ({ talks, username }) => {
        //将数据显示在聊天界面
        if (username === name) {
            //显示在右边
            let rightString = `<p class="right-msg">   
            <span>${talks}</span>
            <span>${username}</span>
        </p>`

            $(".center").append(rightString);

        } else {
            //显示在左边
            let leftString = `<p class="left-msg">
         <span>${username}</span>
         <span>${talks}</span>
     </p>`

            $(".center").append(leftString);
        }

    })

    //正在登录用户
    socket.on('nowlogin', username => {
        let showInfo = `<p><span>系统提示：${username}加入群聊!</span> </p> `

        //进行添加到页面
        $('.info').append(showInfo)
    })

    //监听某个人退出
    socket.on('leave', username => {
        let showInfo = `<p><span>系统提示：${username}退出群聊!</span> </p> `

        //进行添加到页面
        $('.info').append(showInfo)
    })

})

node.js实现服务器端

    下载对应所需依赖包，

npm install nodejs-websocket socket.io --save

      进行编写

// 引入http模块并创建服务器对象
const server = require('http').createServer();

//把服务器对象传入socket.io生成一个io对象
const io = require('socket.io')(server)


let names = [];
let curname
//建立连接
io.on('connection', function (socket) {

    //接收信息
    socket.on('login', username => {
        if (names.includes(username)) {
            //返回登录失败
            socket.emit('loginFail', username)
        } else {
            //返回登录成功
            socket.emit('loginS', username)
            curname = username

            //广播登录数据
            io.sockets.emit('nowlogin', username)

            //将数据保存
            names.push(username)
        }
    })


    //接收聊天信息
    socket.on('talks', ({ talks, name }) => {
        let username = name
        // 广播给每一个用户
        io.sockets.emit('allTalks', { talks, username })
    })


    //退出群聊 - 自动接收
    socket.on('disconnect', () => {

        //广播给所有用户，当前用户已退出群聊
        io.sockets.emit('leave', curname)

        //在用户组中删除当前用户
        names.splice(names.indexOf(curname), 1)

    })


})



// 监听端口
server.listen(8888)

// 打印提示信息
console.log('服务器启动成功，ws://localhost:8888')