前端socket实现基础聊天功能
时间: 2023-12-15 21:03:36 浏览: 82
前端实现基础聊天功能需要使用Socket.IO库,该库可以在客户端和服务端之间创建实时、双向、基于事件的通信。下面是一个简单的聊天室示例:
1. 安装Socket.IO库
使用npm命令行工具安装:
```bash
npm install socket.io
```
2. 创建聊天室页面
在HTML文件中添加以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Chat Example</title>
<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: .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>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(e){
e.preventDefault(); // 阻止表单默认提交行为
socket.emit('chat message', $('#m').val()); // 发送消息给服务端
$('#m').val(''); // 清空输入框
return false;
});
socket.on('chat message', function(msg){ // 监听服务端发送的消息
$('#messages').append($('<li>').text(msg));
});
});
</script>
</body>
</html>
```
3. 创建服务器
创建一个Node.js服务器,使用Socket.IO库进行通信。在服务器端创建一个Socket.IO实例,监听连接事件,当有新的连接时,为连接的客户端绑定事件处理函数,监听客户端发送的消息,并将消息广播给所有连接的客户端。
```javascript
var app = require('http').createServer(handler)
var io = require('socket.io')(app)
var fs = require('fs')
app.listen(3000)
function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500)
return res.end('Error loading index.html')
}
res.writeHead(200)
res.end(data)
})
}
io.on('connection', function (socket) {
console.log('a user connected')
socket.on('chat message', function(msg){
io.emit('chat message', msg) // 广播消息给所有连接的客户端
})
socket.on('disconnect', function(){
console.log('user disconnected')
})
})
```
4. 运行应用程序
在终端中运行以下命令启动应用程序:
```bash
node app.js
```
在浏览器中打开```http://localhost:3000```,即可进入聊天室。在不同的浏览器窗口中打开该链接,即可进行实时聊天。
阅读全文