H5网页版聊天之websocket

1、首先安装ws模块：

安装命令：npm init

npm i ws -D

2、在server.js引入 var wsserver = require('ws').Server

server.js文件

//服务器文件
var wsserver = require('ws').Server;
var wss=new wsserver({port:3000})
var clientObject={}
//流水账号--区分服务器上的客户端
var i=0;
//链接
wss.on('connection',(client)=>{client.name=++i;clientObject[client.name]=clientclient.on('message',(data)=>{console.log('客户端发来：'+data)huifu(client,data)})
})
function huifu(client,message){
//  client.write('服务器收到')for (let i in clientObject) {clientObject[i].send(client.name+"说："+message)}}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">*{margin: 0;padding: 0;}#con{width: 600px;height: 500px;border: 1px solid red;}
</style>
</head>
<body><h1>H5通信</h1><div id="con"></div><input type="text" id="ipt" /><button id="btn">发送</button></body>
<script type="text/javascript">
//  客户端var client=new WebSocket('ws://localhost:3000')client.onopen=function(){}client.onmessage=function(a){
//      a.datadocument.getElementById("con").innerHTML+='<p>'+a.data+'</p>';}document.getElementById("btn").onclick=function(){client.send(document.getElementById("ipt").value)}</script>
</html>

node server运行后即可聊天，可打开多个页面群聊

----------------------------------------------------------------------------------------------------------------------------------

3、拓展

搜索：QQ商家 --> 商家沟通组件 --> 选择后复制代码到html即可用

H5网页版聊天之websocket相关推荐

Springboot整合WebSocket实现网页版聊天，快来围观！
前几天写了一篇<SpringBoot快速入门>一文,然后周末趁着有时间,在这个Springboot框架基础上整合了WebSocket技术写了一个网页版聊天功能. 如果小伙伴找不到那套框架了 ...
html5 websocket java 聊天室_如何利用WebSocket实现网页版聊天室
花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo,期间还走过了一段"看似弯曲"的道路,但是我想其实也不算是弯路吧,因为你走过的路必将留下你的足迹.这 ...
Spring+Netty+Vue 网页版聊天应用，仿微信网页版聊天
1:前言最近在学习网络知识,对于java开发来说,Netty是一个非常重要的框架,无论是为了面试还是日常工作中,如RPC框架Dubbo底层其实是用了Netty, 又或者我们的聊天通信功能,都可能有N ...
项目__网页版聊天室
项目内容使用开源websocket框架mongoose编写网页版本的群聊即时通信工具,使用http+mongoose+session+mysql+jsoncpp的技术构成,从而实现一个网页版的聊天室 ...
基于 SpringBoot + Vue 框架开发的网页版聊天室项目
‍ ‍简介微言聊天室是基于前后端分离,采用SpringBoot+Vue框架开发的网页版聊天室.使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理,以WebSocke ...
羊了个羊游戏h5网页版源码
羊了个羊游戏h5网页版源码 h5网页版,数据还是官方的,一个小demo. 无后台下载附件源码,上传至服务器访问域名即可不可商业,不可商业,不可商业只限交流学习免广告用道具下载地址 https: ...
java web聊天室论文_基于Java网页版聊天室的设计与实现毕业论文含开题报告及文献综述（样例3）...
<基于Java网页版聊天室的设计与实现毕业论文含开题报告及文献综述.doc>由会员分享,可免费在线阅读全文,更多与<基于Java网页版聊天室的设计与实现毕业论文含开题报告及文献综述& ...
乐乐音乐H5网页版-支持krc歌词(动感歌词、翻译和音译歌词)
# 简介 # 乐乐音乐H5网页版主要是基于uni-app框架开发的音乐播放器,目前只支持krc歌词(支持歌词颜色.字体大小.歌词进度调整和翻译和音译歌词),不支持歌词快进功能. # 环境配置 # ...
java web聊天室论文_基于java网页版聊天室的设计与实现毕业论文含开题报告及文献综述.doc...
基于java网页版聊天室的设计与实现毕业论文含开题报告及文献综述.doc 还剩 52页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,很抱歉,此页已超出免费预览范围啦! 如果喜欢就下载吧,价 ...

H5网页版聊天之websocket

1、首先安装ws模块：

2、在server.js引入 var wsserver = require('ws').Server

server.js文件

node server运行后即可聊天，可打开多个页面群聊

3、拓展

搜索：QQ商家 --> 商家沟通组件 --> 选择后复制代码到html即可用

H5网页版聊天之websocket相关推荐

最新文章

热门文章