webSocket 入门第四课（学习笔记） socket.io 简化聊天功能

最新推荐文章于 2022-06-19 23:50:19 发布

Annnaer

最新推荐文章于 2022-06-19 23:50:19 发布

阅读量221

点赞数

文章标签：学习笔记 websocket socket.io

本文链接：https://blog.csdn.net/Annnaer/article/details/86526981

版权

socket.io 简化之前发布的聊天功能！！！！

首先这次优化后的效果及使用与之前并无差异

缩写逻辑与之前也没有区别

首先HTML

一些简单的聊天窗口的样式以及DOM结构。

注意我们在HTML中我们需要引入socket.io.js，也可下载到本地

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>简单的聊天</title>

<link rel="stylesheet" href="public.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>

</head>

<body>

<div class="page-bgc">

<div class="tak-list" id="showText">

//放对话记录

</div>

<div class="send-mess">

<input type="text" id="inMessage" class="inputmess"><button id="sendMessage" class="butsend">发送</button>

</div>

</div>

</body>

</html>

CSS

.page-bgc{

width: 400px;

height: 700px;

background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546939559684&di=35e57521be4451bacce15b1a729415b9&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201606%2F26%2F20160626112402_PHLS2.jpeg');

background-size: auto;

background-repeat: no-repeat;

margin: 20px auto;

position: relative;

}

.send-mess{

position:absolute;

bottom: 0;

left: 0;

}

.inputmess{

width: 300px;

height: 30px;

}

input:focus,button:focus{

outline: none;

}

.butsend{

width: 94px;

height: 35px;

border:1px solid #5ec4f1;

color: #fff;

background-color: #5ec4f1;

}

.tak-list>div:nth-child(odd){

text-align: left;

}

.tak-list>div:nth-child(even){

text-align: right;

}

.tak-list>div.cendiv{

text-align: center;

margin: 5px auto;

width: 125px;

color: #ccc;

background-color: #eee;

}

.tak-list>div>p:nth-child(1){

color: #999;

}

.tak-list>div>p:nth-child(2){

padding: 8px;

border-radius: 5px;

background-color: #5ec4f1;

display: inline;

color: #fff;

}

ok 以上没难度

接下来搭服务！！！

先用命令行引入socket.io这个框架，

npm install socket.io

新建JS 文件，之前是用nodejs中的一个框架nodejs-websocket搭建的本地服务器，但这次我们用socket.io 。

首先要把HTTP引入，其次是socket.io

var http = require("http").createServer();

var io = require("socket.io")(http);

//设定变量区分用户

var num =0;

//listen 监听端口

http.listen(8002);

//连接

io.on('connection',function (socket) {

//连接一次num加1

num++

socket.nickname = "用户" + num;

//emit 输出写入第一个字符串可区分

io.emit("enter",socket.nickname + "进入聊天")

socket.on("message",function (str) {

io.emit("message",socket.nickname+":"+str)

})

socket.on('disconnect',function () {

io.emit('disconnect',socket.nickname + "已离开")

})

})

以上服务算是搭好了！！！

现在在之前html文件中做处理

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>简单的聊天</title>

<link rel="stylesheet" href="public.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>

</head>

<body>

<div class="page-bgc">

<div class="tak-list" id="showText">

</div>

<div class="send-mess">

<input type="text" id="inMessage" class="inputmess"><button id="sendMessage" class="butsend">发送</button>

</div>

</div>

<script>

var iowebsocket = io("ws://localhost:8002/")

document.getElementById("sendMessage").onclick = function(){

var getmess = document.getElementById("inMessage").value;

iowebsocket.emit("message",getmess)

}

iowebsocket.on("enter",function (data) {

console.log(data)

showMessage(data,"enter")

})

iowebsocket.on("message",function (data) {

console.log(data)

showMessage(data,"message")

})

iowebsocket.on("disconnect",function (data) {

console.log(data)

showMessage(data,"disconnect")

})

function showMessage(data,status){

console.log(data)

var div = document.createElement("div");

if(status == "message"){

var usertext = data.split(":");

console.log("用户说的话---",usertext)

div.innerHTML = "<p>"+usertext[0]+ ":</p><p>" + usertext[1] + "</p>"

}else{

console.log("是近/是走",data)

div.setAttribute("class","cendiv");

div.innerHTML =data;

}

document.getElementById("showText").appendChild(div)

}

</script>

</body>

</html>

ok 完成！

Annnaer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webSocket 入门第四课（学习笔记） socket.io 简化聊天功能

socket.io 简化之前发布的聊天功能！！！！首先这次优化后的效果及使用与之前并无差异缩写逻辑与之前也没有区别首先HTML一些简单的聊天窗口的样式以及DOM结构。注意我们在HTML中我们需要引入socket.io.js，也可下载到本地HTML&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;...
复制链接

扫一扫