通过websocket实现简单的多人聊天室

October 23, 2019

1023views

2336 words

第一步：用node搭建服务器
1.首先通过node安装ws插件，ws：是nodejs的一个WebSocket库，可以用来创建服务。
网页端代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的聊天室</title>
</head>
<body>
<h1>聊天室</h1>
<ul id="list">

</ul>
<hr>
<textarea  id="msg" cols="100" rows="10"></textarea>
<button id="send" onclick="sendMsg()">发送</button>
<input type="file" id="f1" onchange="sendImg()">
<img src="" id="preview" style="width: 100px;height: 100px">
 </body>
 </html>
 <script>

创建一个websocket对象然后利用对象建立链接

let websocket = new WebSocket("ws://localhost:8080");

链接成功之后可以触发一个事件

initSocket();

step2 监听websocket链接成功的信息

function initSocket(){
    websocket.onopen=function(e){  //基于事件的 websocket事件
        console.log("哈哈哈哈哈");
        websocket.send("hello server");
    };
}

step3 在客户端接收服务器发送的数据

websocket.onmessage=function (e) {  //e是事件对象
    let li = document.createElement("li");
    let data = JSON.parse(e.data);
    if(data.flag =="txt"){
        li.innerHTML=data.data;
    }else if(data.flag =="img"){
        let img = document.createElement("img");
        img.src= data.data;
        li.appendChild(img);
    }
    let list = document.querySelector("#list");
    list.appendChild(li);
};
function sendMsg() {
    let msg = document.querySelector("#msg").value;
    websocket.send(JSON.stringify({flag:"txt",data:msg}));
}

上传图片功能

function sendImg(){
    let f1 = document.querySelector("#f1").files[0];
    let img = document.querySelector("#preview");
    let reader = new FileReader();//文件流
    reader.readAsDataURL(f1);
    reader.onload = function(e){
        console.log(reader.result);
        img.src = reader.result;
        websocket.send(JSON.stringify({flag:"img",data:reader.result}));

是为了区分发送的是图片还是文字，方便接受的时候显示

    }
}
 </script>

服务器端代码如下

const Websocket = require("ws");
const wss=new Websocket.Server({
port:8080
});

创建端口,服务器搭建成功了
websocket的服务器，要监听数据还要推送数据
通过监听ws服务对象来判断是不是和客户端连接成功了

wss.on("connection",(socket)=>{
console.log("链接成功了");

监听客户端发送的数据

socket.on("message",(data)=>{
    console.log(data);

点对点的发送
socket.send(data);
服务器向客户端发送数据，socket是双向通道
广播模式就是服务器收到消息以后，给连接本服务器的所有客户端都发送过去，这样可以实现实时的多人聊天

    wss.clients.forEach((key,client)=>{ //通过foreach遍历所有的客户端
        client.send(data);
    });
    });
 });

 console.log("webSocket server is listening on 8080");

上述功能的服务器端部分，可以通过在自己的外网服务器搭建，从而实现真正的实时多人聊天。

通过websocket实现简单的多人聊天室

夏目 • 2019 年 10 月 23 日

第一步：用node搭建服务器
1.首先通过node安装ws插件，ws：是nodejs的一个WebSocket库，可以用来创建服务。
网页端代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的聊天室</title>
</head>
<body>
<h1>聊天室</h1>
<ul id="list">

</ul>
<hr>
<textarea  id="msg" cols="100" rows="10"></textarea>
<button id="send" onclick="sendMsg()">发送</button>
<input type="file" id="f1" onchange="sendImg()">
<img src="" id="preview" style="width: 100px;height: 100px">
 </body>
 </html>
 <script>

创建一个websocket对象然后利用对象建立链接

let websocket = new WebSocket("ws://localhost:8080");

链接成功之后可以触发一个事件

initSocket();

step2 监听websocket链接成功的信息

function initSocket(){
    websocket.onopen=function(e){  //基于事件的 websocket事件
        console.log("哈哈哈哈哈");
        websocket.send("hello server");
    };
}

step3 在客户端接收服务器发送的数据

websocket.onmessage=function (e) {  //e是事件对象
    let li = document.createElement("li");
    let data = JSON.parse(e.data);
    if(data.flag =="txt"){
        li.innerHTML=data.data;
    }else if(data.flag =="img"){
        let img = document.createElement("img");
        img.src= data.data;
        li.appendChild(img);
    }
    let list = document.querySelector("#list");
    list.appendChild(li);
};
function sendMsg() {
    let msg = document.querySelector("#msg").value;
    websocket.send(JSON.stringify({flag:"txt",data:msg}));
}

上传图片功能

function sendImg(){
    let f1 = document.querySelector("#f1").files[0];
    let img = document.querySelector("#preview");
    let reader = new FileReader();//文件流
    reader.readAsDataURL(f1);
    reader.onload = function(e){
        console.log(reader.result);
        img.src = reader.result;
        websocket.send(JSON.stringify({flag:"img",data:reader.result}));

是为了区分发送的是图片还是文字，方便接受的时候显示

    }
}
 </script>

服务器端代码如下

const Websocket = require("ws");
const wss=new Websocket.Server({
port:8080
});

创建端口,服务器搭建成功了
websocket的服务器，要监听数据还要推送数据
通过监听ws服务对象来判断是不是和客户端连接成功了

wss.on("connection",(socket)=>{
console.log("链接成功了");

监听客户端发送的数据

socket.on("message",(data)=>{
    console.log(data);

    wss.clients.forEach((key,client)=>{ //通过foreach遍历所有的客户端
        client.send(data);
    });
    });
 });

 console.log("webSocket server is listening on 8080");

上述功能的服务器端部分，可以通过在自己的外网服务器搭建，从而实现真正的实时多人聊天。

通过websocket实现简单的多人聊天室

3 comments

Leave a Comment Cancel reply

通过websocket实现简单的多人聊天室

vue中过渡动画的三种实现方式

Node项目上线

Axios封装

canvas实现简单的实时绘制

canvas实现简单的实时绘制

git基本概念与命令使用

express路由模块化及邮件发送

mongoose使用

使用node中的express连接MongoDB

通过websocket实现简单的多人聊天室