socket .io编写聊天应用程序
创建文件
搭建框架
npm i socket.io -S
npm init -y
express -e
npm i
一,在bin/www中引入
var socket = require('../socket')
核心代码,先require一个io,把server放进来
//创建一个服务器(server),并将app作为监听对象,app就是一个function (req, res) {}
var server = http.createServer(app);
var io = require('socket')(server)
socket(io)
二,将node_modules/socket.io-client/dist/socket.io.js和socket.io.js.map复制到public/javascripts中
三,在public中创建index.html文件
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px Helvetica, Arial;
}
form {
background: #000;
padding: 3px;
position: fixed;
bottom: 0;
width: 100%;
}
form input {
border: 0;
padding: 10px;
width: 90%;
margin-right: 0.5%;
}
form button {
width: 9%;
background: rgb(130, 224, 255);
border: none;
padding: 10px;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
}
#messages li {
padding: 5px 10px;
}
#messages li:nth-child(odd) {
background: #eee;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="./javascripts/socket.io.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input type="text" id="username" name="username" value="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script>
$(function () {
var socket = io();//Socket.io客户端对象
$('form').submit(function (e) {//submit提交到服务器
//console.log('1'+e)
e.preventDefault();//阻止表单默认提交事件,如果去掉第一次发送两次
//io.emit自命名
socket.emit('chat message', {//发送数据,发送一个chat message命令和数据
username: $('#username').val(),//#username的属性值去掉中间包含的空格bai全部去掉之后再赋值给duuserName
message: $('#m').val()
});
$('#m').val('');//如果返回的值为空。returb
return false;
});
//on监听事件,事件名需要一致
socket.on('chat message', (msg) => {//回调函数执行完后取消监听
$('#messages').append($('<li>').text(msg));
})
});
</script>
</body>
</html>
四,创建socket.js
module.exports=(io)=>{
io.on('connection',(socket)=>{
socket.on('chat message',(msg)=>{
socket.emit('chat message', msg.username + '说:' + msg.message);
})
})
}
启动
npm run start