版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_31126175/article/details/79205769
实例1
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket</title>
</head>
<body>
<h1>echo text</h1>
<input id="sendText" type="text">
<button id="sendBtn">发送</button>
<div id="resc"></div>
<script type="text/javascript">
var websocket = new WebSocket("ws://echo.websocket.org/")
websocket.onopen = function () {
console.log("websocket open");
document.getElementById("resc").innerHTML = "连接"
}
websocket.onclose = function () {
console.log("websocket close");
}
websocket.onmessage = function (e) {
console.log(e.data);
document.getElementById("resc").innerHTML = e.data
}
document.getElementById("sendBtn").onclick = function(){
var text = document.getElementById("sendText").value;
websocket.send(text);
}
</script>
</body>
</html> 服务端是用的ws://echo.websocket.org/
实例2
建立本地的服务端,需要用到node.js,请自行安装
在你的工作目录下调出命令行,shift+右键,弹出命令行(或者cmd,切换到你的工作目录)
我们需要nodejs-websocket这个模块
1. 安装模块
npm install nodejs-websocket
2. 客户端代码(index.html文件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket</title>
</head>
<body>
<h1>echo text</h1>
<input id="sendText" type="text">
<button id="sendBtn">发送</button>
<div id="resc"></div>
<script type="text/javascript">
var websocket = new WebSocket("ws://localhost:8001/")
websocket.onopen = function () {
console.log("websocket open");
document.getElementById("resc").innerHTML = "连接"
}
websocket.onclose = function () {
console.log("websocket close");
}
websocket.onmessage = function (e) {
console.log(e.data);
document.getElementById("resc").innerHTML = e.data
}
document.getElementById("sendBtn").onclick = function(){
var text = document.getElementById("sendText").value;
websocket.send(text);
}
</script>
</body>
</html>3.服务端代码 (webserver.js文件)
var ws = require("nodejs-websocket")
// Scream server example: "hi" -> "HI!!!"
var server = ws.createServer(function (conn) {
console.log("New connection")
conn.on("text", function (str) {
console.log("Received "+str)
conn.sendText(str.toUpperCase()+"!!!")
})
conn.on("close", function (code, reason) {
console.log("Connection closed")
})
}).listen(8001)4.在工作目录下调出命令行[shift+右键,弹出命令行(或者cmd,切换到你的工作目录)]
启动服务 npm webserver.js
刷新网页进行测试
实例3 聊天功能
客户端代码(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket</title>
</head>
<body>
<h1>echo text</h1>
<input id="sendText" type="text">
<button id="sendBtn">发送</button>
<div id="resc"></div>
<script type="text/javascript">
var websocket = new WebSocket("ws://localhost:8001/");
function showMessage(str,type) {
var div = document.createElement("div");
if(type == "进入"){
div.style.color = "blue";
}else if(type == "离开"){
div.style.color = "red"
}else{
div.style.color = "pink"
}
div.innerHTML = str;
document.body.appendChild(div);
}
websocket.onopen = function () {
console.log("websocket open");
document.getElementById("sendBtn").onclick = function(){
var text = document.getElementById("sendText").value;
if(text){
websocket.send(text);
}
}
}
websocket.onclose = function () {
console.log("websocket close");
}
websocket.onmessage = function (e) {
console.log(e.data);
var msg = JSON.parse(e.data)
showMessage(msg.data,msg.type);
}
</script>
</body>
</html>服务端代码(webserver.js)
var ws = require("nodejs-websocket")
var PORT = 8001;
var clientCount =0
// Scream server example: "hi" -> "HI!!!"
var server = ws.createServer(function (conn) {
console.log("New connection")
clientCount++
conn.nickname = "user" + clientCount;
var msg={};
msg.type = "进入";
msg.data = conn.nickname +"进入"
boradcast(JSON.stringify(msg))
conn.on("text", function (str) {
console.log("Received "+str)
var msg={};
msg.type = "message";
msg.data = conn.nickname + ": " +str;
boradcast(JSON.stringify(msg))
})
conn.on("close", function (code, reason) {
console.log("Connection closed")
var msg={};
msg.type = "离开";
msg.data = conn.nickname +"离开";
boradcast(JSON.stringify(msg))
})
conn.on("error", function (err) {
console.log("handle error")
console.log(err)
})
}).listen(PORT)
function boradcast(str) {
server.connections.forEach(function(connection){
connection.sendText(str);
})
}运行 node webserver.js
效果图
实例4
1.安装socket.io
npm install socket.io
2.客户端引入
下载下来,在本地使
https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js
3.客户端代码(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket</title>
</head>
<body>
<h1>echo text</h1>
<input id="sendText" type="text">
<button id="sendBtn">发送</button>
<div id="resc"></div>
<script src="socket.io-2.0.4.js" type="text/javascript"></script>
<script type="text/javascript">
var socket = io("ws://localhost:8001/");
function showMessage(str,type) {
var div = document.createElement("div");
if(type == "enter"){
div.style.color = "blue";
}else if(type == "disconnect"){
div.style.color = "red"
}else{
div.style.color = "pink"
}
div.innerHTML = str
document.body.appendChild(div);
}
console.log("websocket open");
document.getElementById("sendBtn").onclick = function(){
var text = document.getElementById("sendText").value;
if(text){
socket.emit('message',text);
}
}
socket.on("enter",function(data){
showMessage(data,"enter")
})
socket.on("disconnect",function(data){
showMessage(data,"disconnect")
})
socket.on("message",function(data){
showMessage(data,"message")
})
</script>
</body>
</html>4.服务端代码(webserver.js)
var app = require('http').createServer()
var io = require('socket.io')(app);
app.listen(8001);
var clientCount = 0;
io.on('connection', function (socket) {
clientCount++
socket.nickname = "user" + clientCount;
io.emit("enter",socket.nickname+"进入")
socket.on("message",function (str) {
io.emit("message",socket.nickname+": "+ str)
})
socket.on("disconnect",function() {
io.emit("disconnect",socket.nickname+"离开")
})
});