基于WebScoket + node 实现聊天室（一）

WebSocket是一种在单个TCP连接上进行全双工通信的协议，是H5新增的一种协议，利用WebSocket可以实现聊天室的功能；

首先需要安装ws：

 

服务端（node）:

let webSocketServer = require('ws').Server //引入ws
let wss = new webSocketServer({ port: 9090 }) //将端口号设置为9090
let clients = [] 

//广播消息，所有用户都能接受到消息
function broadcastSend(message) {
     clients.forEach(function(item) {
        item.ws.send(message)
     })
}


wss.on('connection', function (ws) {
    clients.push({"ws": ws })
    ws.on('message', function (message) {
       broadcastSend(message)
   })
}

前端 js部分：

var ws = new WebSocket("ws://localhost:9090")
var input = document.querySelector('input')

ws.onopen = function (e) {
       console.log('连接成功')
}
function sendMessage() {
        ws.send(input.value)
}
ws.onmessage = (message) => {
       console.log(message.data)
}

html部分 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="">
    <button onclick="sendMessage();">发送</button>
    <div></div>
    <script>
        var ws = new WebSocket("ws://localhost:9090")
        var input = document.querySelector('input')
        ws.onopen = function (e) {
            console.log('连接成功')
        }
        function sendMessage() {
            ws.send(input.value)
        }
        ws.onmessage = (message) => {
            console.log(message.data)
        }
    </script>
</body>
</html>

一个非常简易的聊天室就完成了，emmm，其实不算聊天室，因为我还没完善页面之类的，等有时间，写一个好一点聊天室再分享一下！

 

posted @ 2019-06-26 16:02  晚风ya  阅读(158)  评论(0)    收藏  举报