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 ...
随机推荐
- 09、高级编程之基于排序机制的wordcount程序
package sparkcore.java; import java.util.Arrays; import java.util.Iterator; import org.apache.spark. ...
- Android 获取Activity当前view
View cv = getWindow().getDecorView(); 来自为知笔记(Wiz)
- SQLServer Always On FCI 脑裂及可疑状态修复
FCI 双节点集群,因为晚上集群节点间的网络中断过.两个节点都觉得还有一个节点宕机,在各节点的集群管理中都看到对方已宕机. 连接到集群IP.提示 msdb 数据库有问题: watermark/2/te ...
- 【转】VS2015详细安装步骤
亲身经历记录下来,以备后用.也希望能够帮助到有需要的朋友们! 1.安装之前首先下载VS2015,下载地址: [VS2015社区版官方中文版下载]:http://download.microsoft.c ...
- iostat中的util和svctm (Two traps in iostat: %util and svctm)
iostat, from the excellent sysstat suite of utilities, is the go-to tool for evaluating IO performan ...
- redis详解（三）-- 面试题(转载)
1. 使用redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) (2) 支持丰富数据类型,支持string,li ...
- .net core 2.0+superui +Dapper.SimpleCRUD+mysql+NLog
**_ .net core 2.0+superui +Dapper.SimpleCRUD+mysql+NLog _** 前端框架 superui http://www.supermgr.cn/ 1.组 ...
- Form 组件的学习
学习链接:http://www.cnblogs.com/haiyan123/p/7778888.html Form组件可以做的几件事情: 1.用户请求数据验证 2.自动生成错误信息 3.打包用户提交的 ...
- spring 整合junit进行测试
如果想让junit和spring容器环境无缝对接的话,可以使用如下方式: import com.jd.ptest.service.ICronService; import org.junit.Test ...
- Atitit 酷奇的押金危机 遇到资金链断裂作为创始人应该怎么办
Atitit 酷奇的押金危机 遇到资金链断裂作为创始人应该怎么办 遇到对方确实经营不善,资产已经还不了用户的押金怎么办?? 1. 一些重要原则 1 1.1. 二次分配原则 公平原则 1 1.2. ...