H5的WebSocket

最新推荐文章于 2024-06-17 11:18:05 发布

pandaHe_Status

最新推荐文章于 2024-06-17 11:18:05 发布

阅读量185

点赞数

分类专栏：前端文章标签： websocket js

本文链接：https://blog.csdn.net/weixin_43321726/article/details/111587157

版权

前端专栏收录该内容

101 篇文章 1 订阅

订阅专栏

多人聊天

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线聊天</title>
</head>
<body>
    <h1>websocket</h1>
    <div id="chatroom" style="width: 400px;height: 300px;overflow: auto;border: 1px solid blue;"></div>
    <input type="text" name="sayinput" id="sayinput" value="">
    <input type="button" name="send" id="sendbutton" value="发送">
    <script src="./webClient.js" charset="utf-8"></script>
    <script>
        function send(){
            ws.send(sayinput.value)
            sayinput.value = ''
        }
        document.onkeyup = function(event){
            if(event.keyCode ==13){
                send()
            }
        }
        sendbutton.onclick = function(){
            send()
        }
    </script>
</body>
</html>

node webServer.js

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({port:9000})
var clientMap = new Object()
var i = 0
wss.on('connection',function(ws) {
    console.log(ws+'上线')
    ws.name = ++i
    clientMap[ws.name] = ws
    ws.on('message',function(message){
        broadcast(message,ws)
    })
    ws.on('close',function(){
        console.log('离开')
    })
})
function broadcast(msg,ws) {
    for(var key in clientMap){
        clientMap[key].send(ws.name+'说：' + msg)
    }
}

需要引入的webClient.js

var ws = new WebSocket('ws://127.0.0.1:9000/')
// 建立连接时触发
ws.onopen = function() {
    // ws.send('大家好')
    ws.send('XXXX')
}
// 客户端接收服务端数据时触发
ws.onmessage = function(event) {
    var chatroom = document.querySelector("#chatroom");
    chatroom.innerHTML += `<br/>` + event.data
}
// 连接关闭时触发
ws.onclose = function() {
    alert('closed')
}
// 通信发生错误时触发
ws.onerror = function(err) {
    alert('error'+err)
}

在这里插入图片描述

pandaHe_Status

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5的WebSocket

多人聊天index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>在线聊天</title></head><body> &
复制链接

扫一扫

专栏目录