WebSocket 入门第三课（学习笔记）

最新推荐文章于 2022-09-13 21:23:03 发布

Annnaer

最新推荐文章于 2022-09-13 21:23:03 发布

阅读量278

点赞数

文章标签：学习笔记 websocket

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

版权

搭建实现一个简单的聊一天功能！！！

首先，建立一个文件，添加，html，js，css文件

接着，用命令行建立package.json文件命令如下：

npm init

然后，用命令行引入需要使用到的 nodejs-websocket 模板；命令如下：

npm install nodejs-websocket

以上完成之后，先搭建，基础的HTML文件，其实核内容与前两章一样，就是改变了一下样式。具体看代码内介绍

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

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

</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 chatwebsocket = new WebSocket("ws://localhost:8002/")

chatwebsocket.onopen = function () {

// websocket 打开

}

chatwebsocket.onmessage = function(evt){

console.log(evt)

//对接收到的数据做处理

var str = evt.data

var textarr = str.split("/");//"/"用来区别有人进来，而不是有人说话

console.log("截取后",textarr)

var div = document.createElement("div");//建立一个新的div

if(textarr[1] == '1'){//有人进来，居中显示

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

div.innerHTML = textarr[0];

}else{//有人说话，双层显示

var usertext = textarr[0].split(":");

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

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

}

document.getElementById("showText").appendChild(div)//把新建的div放入HTML中

}

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

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

chatwebsocket.send(getmess)

}

chatwebsocket.onclose = function () {

// websocket 关闭

}

</script>

</body>

</html>

这个对话的整个样式是模拟我们聊天的样式，很简单！！！

.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;

}

这个样式呢，有个问题，就是一个人如果连这说两句话，两句话不在同一边，是因为我只做了奇偶的区别判断，没有做，同一个人的判断。其实也不难。不过今天不想加了。。。。。。。。。

还有就是我们的js,用的完全就是之前说的点和代码。稍作修改就OK！！！

var ws = require("nodejs-websocket");

var num =0;

var server = ws.createServer(function (conn) {

num++

conn.nickname = "用户" + num;

notification(conn.nickname + "进入聊天/1");

conn.on('text',function (str) {

notification(conn.nickname+":"+str)

})

conn.on("close", function (code, reason) {

// console.log("Connection closed")

notification(conn.nickname + "已离开/1")

})

conn.on("error", function (err) {

console.log("error",err)

})

}).listen(8002)

function notification(str) {

server.connections.forEach(function (conn) {

conn.sendText(str)

})

}

ok了

我也是看着别人教的学着理解着记着。可能有理解错的。请大家见谅！！

欢迎指正！！！

康萨米达！！！！！！

Annnaer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebSocket 入门第三课（学习笔记）

搭建实现一个简单的聊一天功能！！！首先，建立一个文件，添加，html，js，css文件接着，用命令行建立package.json文件命令如下：npm init然后，用命令行引入需要使用到的 nodejs-websocket 模板；命令如下：npm install nodejs-websocket 以上完成之后，先搭建，基础的HTML文件，其实核内容与前两章一样...
复制链接

扫一扫