-
- 精慕门2241013兴烨 2020-11-02
- 怎样报名 ？
- 0赞 · 0采集
-
- 小小龍 2018-04-17
首先下载nodejs
然后下载sublinetext3或者nodepad++或者phpstorm都可以啊
然后安装socket.io ->$ npm install socket.io
在https://socket.io/blog/网页获取到https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js下载保存
在https://socket.io/docs/网页获取到服务端和客户端资料，改良之后如下所示
wsServer.js服务端
var app = require('http').createServer()
var io = require('socket.io')(app)
var PORT = 3000
var clientCount = 0
app.listen(PORT)
io.on('connection',function(socket){
clientCount++
socket.nickname = 'user' + clientCount
io.emit('enter',socket.nickname + 'comes in')
socket.on('message',function(str){
io.emit('message',socket.nickname + "says:" + str)
})
socket.on('disconnect',function(str){
io.emit('leave',socket.nickname + 'left')
})
})
console.log("sebsocket server listening on port" + PORT)
index.html客户端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>websocket</title>
<script type="text/javascript" src="socket.io.js"></script>
</head>
<body>
<h1>Chat Room</h1>
<input id="sendTxt" type="text" >
<button id="sendBtn">发送</button>
<script type="text/javascript">
var socket = new io("ws://localhost:3000/");
function showMessage(str,type){
var div = document.createElement('div');
div.innerHTML = str;
if(type == "enter"){
div.style.color = "blue";
}else if(type == "leave"){
div.style.color = "red";
}
document.body.appendChild(div);
}
document.getElementById("sendBtn").onclick = function(){
var txt = document.getElementById("sendTxt").value;
if(txt){
socket.emit('message',txt);
}
}
socket.on('enter',function(data){
showMessage(data,'enter');
})
socket.on('message',function(data){
showMessage(data,'message');
})
socket.on('leave',function(data){
showMessage(data,'leave');
})
</script>
</body>
</html>
- 0赞 · 0采集
-
- 简☆单★◎就是美 2018-01-10
- 使用socket.io实现websocket
-
截图0赞 · 0采集
-
- 慕莱坞111599 2018-01-04
- websocket:服务器与浏览器端建立持久连接 nodejs-websocket:缺陷只能传送字符串 socket.io-优点：1，可直接传输对象。2，可自定义消息
- 1赞 · 0采集
-
- 慕粉5131034 2017-10-08
- socket.io 的优势： 1. 在发送数据的时候，可以直接发送 JavaScript 对象； 2. 可以方便自定义消息类型。
- 1赞 · 0采集
-
- moocer9527 2017-09-13
- 知识小结
-
截图0赞 · 0采集
