介绍 npm我nodejs-websocket——保存 让ws=要求(“nodejs-websocket");
console.log(“开始建立链接“);
ws。createServer(函数(康涅狄格州){
conn.on (“text",函数(str) {
console.log(“收到的信息为“,str);
conn.send (“$ {str}(机器人”)
}）;
conn.on (“close"函数(代码,原因){
console.log(“关闭连接“)
}）;
conn.on (“error"函数(代码,原因){
console.log(“异常关闭“)
})
}).listen (8001);
console.log(“链接建立完毕“); & lt; template>
类& lt; p=皌est3"祝辞
类& lt; p=癿sg"ref=癰ox"比;
& lt; p v=發ist"项目;:类=癧item.type & # 39; msg-item& # 39;]“比;
& lt; p>
{{item.content}}
& lt;/p>
& lt;/p>
& lt;/p>
类& lt; p=癷nput-group"祝辞
& lt;输入类型=皌ext"v模型=癱ontentText"比;
& lt;按钮@click=皊endText"祝辞发送& lt;/button>
& lt;/p>
& lt;/p>
& lt;/template>
& lt; script>
出口默认{
名称:“index3",
数据(){
返回{
列表:[],//聊天记录的数组
contentText:““,//输入输入的值
}
},
方法:{//发送聊天信息
sendText () {
让=这个;
这一点。=[…这列表。列表,{类型:“mine",内容:this.contentText}];//通过类型字段进行区分是自己(我的)发的还是系统(机器人)返回的
这一点。backText(函数(){
那contentText=啊?/加回调在得到返回数据的时候清除输入框的内容
}）;
}，
backText(回调){
让=这个;
如果(window.WebSocket) {
让ws=new WebSocket (“ws://192.168.11.169:8001");
ws。onopen=function (e) {
console.log(“链接服务器成功“);
console.log (“。contentText女儿家,that.contentText);
ws.send (that.contentText);
回调();
}；
ws。onclose=function (e) {
console.log(“服务器关闭“)
}；
ws。onerror=function () {
console.log(“服务器出错“)
}；
ws。onmessage函数=(e) {
那=[…列表。列表,{类型:“robot",内容:e.data}]
}
}
}
}，
看:{//监听列表,当有修改的时候进行p的屏幕滚动,确保能看到最新的聊的天
列表:函数(){
让=这个;
setTimeout(()=比;{
refs.box美元。scrollTop=, refs.box.scrollHeight美元;
}, 0);//加setTimeout的原因:由于vue采用虚拟dom,我每次生成新的消息时获取到的p的scrollHeight的值是生成新消息之前的值,所以造成每次都是最新的那条消息被隐藏掉了
}
}，
安装(){
}
}；
& lt;/script>
& lt;风格范围lang=皊css"祝辞
.test3 {
text-align:中心;
}
.msg {
宽度:100 px;
身高:100 px;
溢出:汽车;
padding-top: 5 px;
边界:1 px固体红;
显示:inline-block;
margin-bottom: 6 px;
.msg-item {
位置:相对;
溢出:隐藏;
p {
显示:inline-block;
border - radius: 40像素;
背景:# 3 c3d5a;
颜色:白色;
浮:左;
填充:2 px 12 px;
保证金:0 0 0 2 px;
max-width: 70%;
text-align:左;
box-sizing: border-box;
}
和。我的{
p {
浮:正确;
背景:海蓝宝石;
颜色:白色;
}
}
}
}
& lt;/style>
小编给大家分享一下节点+ vue如何实现简单的WebSocket聊天功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
最近学习了一下WebSocket的即时通信,感觉非常的强大,这里我用节点启动了一个服务进行WebSocket链接,然后再vue的视图里面进行了链接,进行通信,废话不多说,直接上代码吧,
首先,我需要用到节点的nodejs-websocket模块
使用纱进行安装
纱添加nodejs-websocket——保存
当然,你也可以用npm进行安装
安装完毕之后,我们开始写服务端的代码,首先,我用节点在本地起了一个节点服务器用来开启websocket服务
袜子。js:
服务端主要是用nodejs-websocket用来开启服务,以及返回前端需要的值,这里我只是做了一个简单的处理,在接受值得后面加了一个“机器人”的字符串,
然后,我们需要开启这个节点服务,
命令后面的路径一定要找对,我是把袜子。js放在了根目录的套接字文件夹下面
执行
纱插座
最后,看我们的客户端,客户端我是想有一个输入框,然后有个聊天框:
