9、socket.io,websocket 前后端实时通信,(聊天室的实现)
websocket 一种通信协议
ajax/jsonp 单工通信
websocket 全双工通信 性能高 速度快
2种方式：
1、前端的websocket
2、后端的 socket.io
一、后端socket.io
cnpm i socket.io
接收on 发送emit ——可以发送任意类型的数据
后端：
1、创建httpServer
2、创建wsServer var ws = io(httpServer);
3、连接
ws.on("connect",function(socket){
//45 发送或者接收
发送 socket.emit("名称"，数据);
广播 socket.broadcast.emit("名称"，数据);
接收 socket.on(名称，function(data——数据){
});
});
前端：
1、引入js src="/socket.io/socket.io.js"
2、连接
var ws = io("ws://ip:port");
3、发送接收 on/emit
聊天室：
chat.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0;margin:0;list-style:none;}
#div1{ position:relative;width:500px; height:400px; border:1px solid red;}
#text{ position:absolute;left:0;bottom:0;width:80%; height:100px;}
#btn1{ position:absolute;right:0;bottom:0;width:20%; height:100px;}
#ul1{width:100%; height:300px; background:#ccc; overflow-y:auto;}
#ul1 li{ line-height:30px; border-bottom:1px dashed red;}
</style>
<!--<script src="/socket.io/socket.io.js"></script>-->
<script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
<script>//http://10.30.155.92
//var ws = io("ws://10.30.155.92:9000");
//var ws = io("http://10.30.155.92:9000");
//var ws = io();
var ws = io.connect("ws://10.30.155.92:9000");//标准写法 ws://
window.onload = function(){
var oUl = document.getElementById("ul1");
var oText = document.getElementById("text");
var oBtn = document.getElementById("btn1");
var name = prompt("请输入你的用户名")//"张三";
oBtn.onclick = function(){
//发送数据
var data = {name:name,value:oText.value};
ws.emit("msg",data);
createLi(data);
};
//接收数据 1创建dom
ws.on("msg_all",function(data){
console.log(data);
createLi(data);
});
function createLi(data){
//创建dom
var oLi = document.createElement("li");
oLi.innerHTML = `<strong>${data.name}</strong> <span>${data.value}</span>` ;
oUl.appendChild(oLi);
oUl.scrollTop = oUl.scrollHeight;
}
};
</script>
</head>
<body>
<div id="div1">
<ul id="ul1">
<!--<li><strong>张三</strong> <span>聊天内容</span></li>-->
</ul>
<textarea id="text"></textarea>
<input id="btn1" type="button" value="发送"/>
</div>
</body>
</html>
chat.js
var http = require("http");
var io = require("socket.io");
var fs = require("fs");
//创建http服务
var httpServer = http.createServer(function(req,res){
var url = req.url;
fs.readFile("www"+url,function(err,data){
if(err){
res.end("404");
} else {
res.end(data);
}
});
});
httpServer.listen(9000);
//创建websockt服务
var ws = io(httpServer);
ws.on("connection",function(socket){
console.log("wsServer");
//接收数据
socket.on("msg",function(data){
console.log(data);
//发送数据广播
socket.broadcast.emit("msg_all",data);
});
});
前端H5 WebSocket
ws: http
wss:https
前端配置:
var ws = new WebSocket("ws://ip:port");
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
};
ws.onclose = function(evt) {
console.log("Connection closed.");
};
后端：npm i ws
npm i ws
https://www.npmjs.com/package/ws
var wss = new WebSocket({server:httpServer});
wss.on("connection",function(ws,req){
发送 接收
接收
ws.onmessage(function(ev){
//数据 ev.data
});
发送：
ws.send(数据);
数据 最好只能是字符串！！！
});
exp:
h5.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
var ws = new WebSocket("ws://localhost:9000");
//建立连接
ws.onopen = function(ev) {
console.log("连接成功");
};
//接收数据
ws.onmessage = function(ev) {
console.log( "接收数据",ev.data);//server--->client
//发送数据
//ws.send("client--->server");
try{
//只处理json
var json = JSON.parse(ev.data);
console.log(json);
if(json.type == "click"){
var oSpan = document.getElementById("s1");
oSpan.innerHTML = json.value;
}
}catch(e){
}
};
//连接关闭
ws.onclose = function(evt) {
console.log("连接关闭");
};
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
//发送数据 只能发送字符串
ws.send(JSON.stringify({type:"click",value:"abc"}));
};
}
</script>
</head>
<body>
h5 WebSocket
<input id="btn1" type="button" value="发送"/><span id="s1">1111</span>
</body>
</html>
h5.js:
var http = require("http");
var WebSocket = require("ws");
var fs = require("fs");
//创建http服务
var httpServer = http.createServer(function(req,res){
var url = req.url;
fs.readFile("www"+url,function(err,data){
if(err){
res.end("404");
} else {
res.end(data);
}
});
});
httpServer.listen(9000);
//创建websockt服务
var wss = new WebSocket.Server({ server:httpServer });
wss.on('connection', function connection(ws) {
console.log("wsServer");
//发送 send
ws.send("server--->client");
//接收
ws.on('message', function(message) {
console.log(message);
//ws.send(message);
//广播
wss.clients.forEach(function(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
爱我所爱无怨无悔
9、socket.io,websocket 前后端实时通信,(聊天室的实现)的更多相关文章
- WebSocket 时时双向数据，前后端（聊天室）
https://blog.csdn.net/lecepin/article/details/54632749 实例内容 今天主要说一下微信的WebSocket接口以及在小程序中的使用. WebSock ...
- 使用node.js + socket.io + redis实现基本的聊天室场景
在这篇文章Redis数据库及其基本操作中介绍了Redis及redis-cli的基本操作. 其中的publish-subscribe机制应用比较广泛, 那么接下来使用nodejs来实现该机制. 本文是对 ...
- 使用socket.io实现多房间通信聊天室
websocket的实现有很多种,像ws和socket.io,这里使用的是socket.io来实现多房间的效果. 这里的使用没有使用socket.io官方提供的namespace和room,而是完全通 ...
- vue.js+socket.io+express+mongodb打造在线聊天
vue.js+socket.io+express+mongodb打造在线聊天 在线地址观看 http://www.chenleiming.com github地址 https://github.com ...
- vue.js+socket.io+express+mongodb打造在线聊天[二]
vue.js+socket.io+express+mongodb打造在线聊天[二] 在线地址观看 http://www.chenleiming.com github地址 https://github. ...
- HTML5新特性 websocket(重点)--多对多聊天室
一.html5新特性 websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...
- java 用socket制作一个简易多人聊天室
代码: 服务器端Server import java.io.*; import java.net.*; import java.util.ArrayList; public class Server{ ...
- 与众不同 windows phone (31) - Communication（通信）之基于 Socket UDP 开发一个多人聊天室
原文:与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...
- 与众不同 windows phone (30) - Communication（通信）之基于 Socket TCP 开发一个多人聊天室
原文:与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...
随机推荐
- Go语言栈定义及相关方法实现
// stack 栈 package Algorithm import ( "errors" "reflect" ) // 栈定义 type Stack str ...
- SpringMVC的拦截器（Interceptor）和过滤器（Filter）的区别与联系
摘自: http://blog.csdn.net/xiaoyaotan_111/article/details/53817918 一 简介 (1)过滤器: 依赖于servlet容器.在实现上基于函数回 ...
- SQLAlchemy——获取某列为空的数据
session.query(StockAllInfo).filter( StockAllInfo.ts_code == tsCode and StockAllInfo.py_code==None).a ...
- 每天一个linux命令:chmod
1.命令简介 chmod(Change mode) 用来将每个文件的模式更改为指定值.Linux/Unix 的档案调用权限分为三级 : 档案拥有者.群组.其他. u :目录或者文件的当前的用户 g : ...
- 每天一个linux命令(12):more命令
1.命令简介 more (more) 该命令一次显示一屏文本,满屏后停下来,并且在屏幕的底部出现一个提示信息,给出至今己显示的该文件的百分比,方便逐页阅读(file perusal filter fo ...
- 【Linux】Centos下安装ffmpeg
一.准备工作 1.系统环境:CentOS release 6.9 (Final) 2.安装依赖包 yum install -y autoconf automake cmake freetype-dev ...
- 爬虫对自己服务器 CPU，内存和网速的影响
今天无事写一遍关于爬虫对计算机的影响,主要是给小白同学普及一下爬虫的基础知识. 在我们写爬虫的时候,首先会想到开多线程,如果使用的语言是Python,很不幸,因为Python存在 GIL,在任何时候 ...
- Spring Boot系列——死信队列
在说死信队列之前,我们先介绍下为什么需要用死信队列. 如果想直接了解死信对接,直接跳入下文的"死信队列"部分即可. ack机制和requeue-rejected属性 我们还是基于上 ...
- Google I/O 官方应用中的动效设计
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jILRvRTrc/article/details/82881743 作者:Nick Butcher, ...
- ComputeShader中Consume与AppendStructuredBuffer的使用
上个月写了一篇使用像素shader返回累加信息的Trick:https://www.cnblogs.com/hont/p/9977401.html 后来无意中发现DX11/Compute shader ...