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

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

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

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

首先HTML

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

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

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文件中做处理

发送

 

 

ok 完成！